How to add background image to div using CSS?

This video tutorial teaches you to create a HTML page, add div to page and then use the CSS to add background image to it.

How to add background image to div using CSS?

How to add background image to div using CSS?

CSS can be used to add the background image to a div very easily and in this video tutorial we have demonstrated this to you. In this tutorial we have a simple HTML page with a DIV on it. In this div we have a <p> tag which contains simple text.

Now in the div we want to add the background image and this is possible through the use of CSS. CSS provides the background-image property which is used to add the background image to a div.

Here is the video tutorial of: "How to add background image to div using CSS?"

Here is the code example of adding the background image to a div:

background-image:url(navigation_bg.gif);

The above code is used to add the background image named navigation_bg.gif to the said div.

By default image is repeated horizontally and vertically. Here is the screen shot of the example when the image is repeated horizontally and vertically.

How to add background image to div using CSS?

Here is the complete code example:

<html>
 <head>
  <title>How to add background image to div using css?</title>
<style>
.testdiv{
	width:400px;
	height:400px;
	/*background:lightgrey;*/

	background-image:url(navigation_bg.gif);
	
	/*
	background-repeat-x: no-repeat;
	background-repeat-y: no-repeat;
	*/
}
</style>
 </head>

 <body>
  <p>How to add background image to div using css?</p>
  <div class="testdiv">
	<p>Hello</p>
  </div>
 </body>
</html>

To stop the repeating of the image following code can be used:

background-image:url(navigation_bg.gif);
background-repeat: no-repeat;

Here is the screen shot after no-repeat option:

How to add background image to div using CSS?

Following code can be used for repeating the image vertically:

background-image:url(navigation_bg.gif);
background-repeat: repeat-y;

Here is the screen shot of repeat-y:

How to add background image to div using CSS?

Top stop the repeating the image in x axis following code can be used:

background-repeat-x: no-repeat;

Top stop the repeating the image in xy axis following code can be used:

background-repeat-y: no-repeat;

Download the source code of the example.

Check more HTML and CSS tutorials which is good for beginners in HMTL programming.