Set Background Image for a div

In order to add a background image to a <div> add css background image property to a class or id which is assigned to the div. For instance, let’s assume you have a div with a class “baby” ( <div class= “baby”>) and want to add background image “cute-baby.jpg”. You can add it as follows:

.baby
{
  width: 200px;
  height: 150px;
  background-image: url(images/cute-baby.jpg);
  background-repeat: no-repeat;
} 

By default, the background image will repeat (tile) both vertically and horizontally. To prevent this, use background-repeat: no-repeat;

Alternatively, you can apply the CSS code inline in the div HTML code:

<div style="background-image: url(images/cute-baby.jpg); "></div>

For detailed reference and sample code see:
Background image code samples and reference

Close

Copy and paste this code to display the image on your site

Copied!