How To Add Image In CSS Background?

Add Image in CSS Background With Div

In previous article I teach you how to add image in html document with simple img tag but in this tutorial you will learn adding image in html document with css.

a simple example image link in html

Download VS Code Editor: Clink here
<img src="xps.jpg" alt="good content writer">

Define the image width and hight

img src="xps.jpg" alt="good content writer" width="1024" height="600">

Adding a image in html  body section.

Step 01: Create sample html page copy following code and past it your index.html

<html>
<head>
<title>HTML Tutorial</title>
<head>

<h1 style=”text-align: center; color: blue;”>HTML BACKGROUND IMAGE</h1>
</head>
</head>
<body>

</body>
</html>

 

Add image in CSS Background

Step 02: Add css script in your index.html file in below end the html tag like this.

<style type=”text/css”>
body{
background-image: url(‘xps.jpg’);
background-size: cover;
}

</style>

Output:

html add image
html add image

Adding Image In HTML Div  Section

Adding a image in html div section to do this we create one more step in body section.

Step 01: Add <div> tag in the body section

Step 02: Add a class in the div

Step 03: Define a class in the css style

Example:

<body>

<div class=”bg-img”>

</div>

</body>

Add image In CSS from folder

<style type=”text/css”>
.bg-img{
background-image: url(‘xps.jpg’);

width: 1920px;
height: 700px;
}

</style>

Set The div border

<style type=”text/css”>
.bg-img{
background-image: url(‘xps.jpg’);
background-size: cover;
width: 1200px;
height: 500px;
border-radius: 30px;
border: 2px solid;
border-color: blue;
margin-left: 30px;

}

</style>

 

HTML AND CSS TUTORIAL FOR BEGINNER

This Post Has 4 Comments

  1. Marisol Patnode

    I was suggested this web site by my cousin. I’m not sure whether this post is
    written by him as nobody else know such detailed about my trouble.
    You are amazing! Thanks!

  2. Booglymn

    [url=https://atenolol.shop/]price of atenolol[/url]

  3. Your blog consistently holds my attention from beginning to end. I can’t help but stop reading without consuming every word you write.

Leave a Reply