Div Background Image

Div Background Image

Many times you want to add background image to div. Here is simplest tutorial to do so. We are using background-image property of style. A Div below is 500px wide and 500px in height. It is referring my Google plus image. For demo purpose feel free to use it in your code.

Div Background Image Example

 

<html>
<head>
    <title>div background image</title>
    <style>
    .divBackOne
    {
      background-image:url('https://lh5.googleusercontent.com/-9GJERN1Zcc8/AAAAAAAAAAI/AAAAAAAAAsI/Fn74Z1B8pU8/s200-c-k/photo.jpg');
      height:500px;
      width:500px;
    }
    
    </style>
</head>
<body>
<div class="divBackOne">
This is div with background image
</div>
</body>
</html>

You can also position background image at top bottom or top right etc.
Use background-position:right top; in CSS.

To repeat background image on X axis use background-repeat:repeat-x;

Similarly, you can repeat image on Y axis use background-repeat:repeat-Y;

Tags: