CSS Tutorial: Div with Background Image

One of the nice features of CSS that you can make your site prettier with is the backgrounds. You can create colorful backgrounds, backgrounds with images, with textures and even with videos using CSS. The background property gives you the freedom to enrich the look of your website with full screen background images, full screen background videos or by adding background images to certain elements such as divisions (div).

Adding a background image to a div element on your site will be a good idea as long as it fits the theme of the site well and helps present your content and message in a better way. Sometimes, background images are used just for the sake of using them, making the content harder to view or the text harder to read, which is a bad web design practice that should be avoided.

TIP: Note that using an excessive amount of large image files on your website will consume your web hosting bandwidth very quickly. Therefore, you should always properly optimize your image files as much as possible.

In your CSS backgrounds, depending on the content of the image, you may use a JPEG, PNG or GIF file as your background image. You can find countless of free stock images, public domain images or vector images on a variety of resources on the Internet. If you ever need to edit or convert images you can use an online photo editor or image conversion tool.

Now, let's continue with the following examples that demonstrate the use of background images with CSS in different cases.

Div with Equal-Sized Background Image

In this example, we have an image that has 300px width and 100px height, and we want to use that image as the background of a div element that also has 300px width and 100px height, so that the image will fit the div perfectly.

Firstly, we will edit our HTML file (say, index.html) and add a <div> element to it. Then we will add an idattribute to this div element so that we can control its style with CSS.

<div id="headline"></div>

In the external style file (say, style.css), we will add the following CSS code:

#headline {
  width: 300px;
  height: 100px;
  background: url(/images/background.jpg);
}

Note that, when specifying the background image using url() value for the background property, use the correct path of the image file. In our example, the background.jpg file is located in the images folder in the root directory.

Here is how this div will look:

Div with Repeating Background Image

In our second example, we will use the same image but this time for a larger div element. In order to fill the background of the large div element, we will repeat the background image using the following CSS code:

#headline {
  width: 300px;
  height: 300px;
  background: url(/images/background.jpg);
  background-repeat: repeat;
}

Here is how this div will look:

By default, background images do repeat to fill the area of the div element. Using the background-repeat property, you can control the way you want the image to repeat or not. You can use the following CSS rules for different scenarios:

/* Don't repeat background image. */
background-repeat: no-repeat;

/* Repeat background image in both directions (horizontal-vertical). */
background-repeat: repeat;

/* Repeat background image horizontally. */
background-repeat: repeat-x;

/* Repeat background image vertically. */
background-repeat: repeat-y;

Div with Stretching Background Image

If you have a background image that is smaller than the div element in one of the dimensions (width-height), but you still want to fill the div area without repeating the image, you can stretch the image using the background-size CSS property. You can use this background property in a number of ways such as the following two examples:

Scale the image to fit the smaller dimension:

#headline {
  width: 300px;
  height: 300px;
  background: url(/images/background.jpg);
  background-position: center;
  background-size: cover;
}

The result will be like this:

Since the height of the image is smaller than its width, its height is scaled to fit the height of the container div, to fully cover the div area. The drawback of this method is that some part of the image to the right will not be visible. The background-position property is optional and it is used to center align the background image.

Stretch the image in both directions:

#headline {
  width: 300px;
  height: 300px;
  background: url(/images/background.jpg);
  background-size: 100% 100%;
}

In this method, the whole of the image is visible but as you can see from the above image, it will be stretched in both directions, sometimes making an unpleasant display. Use it only if you think the resulting image is acceptable.

f t g+ in