Divs with Background Images

Includes CSS Rules for Responsive Background Image Sizes

Specifying a background image in a div is similar to specifying a background image for an entire web page.

With a div, the background image is constrained within the div. Any divs on a page can have their own background image.

Div content is on top of the div's background image like web page content is on top of its background image.

Some content may benefit from an underlying background image.

A poem over a textured background, for example, or an image of a watercolor painting. An ad may be presented over a muted graph or a logo. Depending on the type of website, navigation buttons may be put in a div with a scenic background.

Three of the nine CSS rules are for responsive sites, automatically resizing background images. Those are indicated within the sections where they are described.

Background images can be tiled, positioned in a specific location, stretched to fill the entire div and, for responsive sites, automatically sized relative to the size of the div.

GIF, JPG, and PNG images can be used for background images.

The examples all have inline styles. For live public pages, you would generally have the style in a CSS style tag or import it from an external CSS file.

Tiled Background Image

Here's the first example. (Background image tiling or repetition is default.)

Tiled

Here's the source code:

<div style="
   height: 100px; width: 250px; border: 1px solid black; 
   background-image: url(https://www.willmaster.com/library/images/background-sample-50.jpg);
   ">
<h1><span style="background-color:white;"> Tiled </span></h1>
</div>

The first line of the CSS style specifies the div's height, width, and border. This will be fairly consistent for all the examples and won't be mentioned again in example notes.

The second line of the CSS style is where the fun is at. The CSS property is background-image and its value is url(...), the "..." replaced with the URL of the image. The line is colored blue.

Some of the examples have content, some don't. Unless there's something unusual about the content, it won't be mentioned again in the example notes.

Horizontally-tiled Background Image

This next example has the background image horizontally tiled, repeated along the top of the div.

Horizontally Tiled

The source code:

<div style="
   height: 100px; width: 250px; border: 1px solid black; 
   background-image: url(https://www.willmaster.com/library/images/background-sample-50.jpg);
   background-repeat: repeat-x;
   ">
<h1><span style="background-color:white;"> Horizontally Tiled </span></h1>
</div>

The CSS property background-repeat with value repeat-x (colored blue) tells the browser to repeat the image horizontally, once. (Value repeat-y is for repeating vertically. See next example.)

Vertically-tiled Background Image

Here, the background image is tiled vertically.

Vertically Tiled

The source code:

<div style="
   height: 100px; width: 250px; border: 1px solid black; 
   background-image: url(https://www.willmaster.com/library/images/background-sample-50.jpg);
   background-repeat: repeat-y;
   ">
<h1> Vertically Tiled </h1>
</div>

The CSS property background-repeat with value repeat-y (colored blue) tells the browser to repeat the image vertically, once. (Value repeat-x is for repeating horizontally. See previous example.)

Untiled Background Image

This background image is untiled. The background contains only one instance of the image.

Untiled

The source code:

<div style="
   height: 100px; width: 250px; border: 1px solid black; 
   background-image: url(https://www.willmaster.com/library/images/background-sample-50.jpg);
   background-repeat: no-repeat;
   ">
<h1> Untiled </h1>
</div>

The CSS property background-repeat with value no-repeat (colored blue) tells the browser not to repeat the image The result is the image appears only once. The default location is the top-left corner.

Centered Background Image

Here, the image is centered in the middle of the div.

The source code:

<div style="
   height: 100px; width: 250px; border: 1px solid black; 
   background-image: url(https://www.willmaster.com/library/images/background-sample-50.jpg);
   background-repeat: no-repeat;
   background-position: center center;
   ">
</div>

The CSS property background-position specifies the position of the background-image. It takes one or two values. The first value is the horizontal position. The second value is the vertical position.

In the example, both values are "center" (colored blue), which causes the image to be centered both horizontally and vertically.

Valid horizontal values are:

left
right
center
a percentage of the width of the div (25% is a quarter of the way in from the left), or
a horizontal pixel position within the div measured from the left edge (50px is 50 pixels from the left edge).

Valid vertical values are:

top
bottom
center
a percentage of the height of the div (25% is a quarter of the way down from the top), or
a vertical pixel position within the div measured from the left edge (50px is 50 pixels down from the top).

If the the background-position property contains only one value, it's assumed to be the horizontal position value and the vertical postion is assumed to be "center".

Static-sized Background Image

As a demonstration of what can be done, this background image is resized to 40x60 pixels.

The source code:

<div style="
   height: 100px; width: 250px; border: 1px solid black; 
   background-image: url(https://www.willmaster.com/library/images/background-sample-50.jpg);
   background-repeat: no-repeat;
   background-position: center center;
   background-size: 40px 60px;
   ">
</div>

The CSS property background-size specifies the size of the background-image. It takes one or two values. The first value is the horizontal position. The second value is the vertical position.

If the second value is missing for a static size specified in pixels, it's assumed to be "auto" with the image scaled proportionally according to the original image dimensions.

In the example, the values are "40px" and "60px" (colored blue), which causes the image to be 40 pixels wide and 60 pixels high.

Responsive-sized Background Image

These examples demonstrate the first of several responsive site-friendly CSS rules for resizing background images. The image is specified to be 85% of the height of the div.

The two examples demonstrate the background image automatically resized according to the size of the div it's in.

There's no content in these example divs to better demonstrate the size of their background images.

Only the specified height is different for the second div. Therefore, only the source code of the first div is here:

<div style="
   height: 100px; width: 250px; border: 1px solid black; 
   background-image: url(https://www.willmaster.com/library/images/background-sample-250.jpg);
   background-repeat: no-repeat;
   background-position: center center;
   background-size: auto 85%;
   ">
</div>

The CSS property background-size is also used here, like it is with the static-sized background image. In this case, a percentage is specified instead of pixel size.

As with the pixel size, the background-size property takes one or two values:

The first value is either "auto" or the width of the image specified as a percentage of the div's horizontal dimension. If "auto" the image is scaled proportionally according to the dimensions of the original image.
The second value is auto or the height of the image specified as a percentage of the div's vertical dimension. If "auto" the image is scaled proportionally according to the dimensions of the original image. If the second value is missing, it's assumed to be "auto".

In the example, the values are "auto" and "85%" (colored blue), which causes the image height to be 85% of the div's height and the image width to be proportionally scaled according to the dimensions of the original image.

Full-cover Background Image

These examples demonstrate another responsive site-friendly CSS rule for background images.

The background image is automatically resized to cover the entire background of the div. Any image excess is cropped.

The examples using the same CSS definitions except the width of the div.

Only the width is different for the second div. Therefore, only the source code of the first div is here:

<div style="
   height: 100px; width: 250px; border: 1px solid black; 
   background-image: url(https://www.willmaster.com/library/images/background-sample-250.jpg);
   background-repeat: no-repeat;
   background-position: center center;
   background-size: cover;
   ">
</div>

The CSS property background-size is used again, this time with the value "cover" (colored blue).

The image is sized so the all dimensions are at least as large as the available background of the image. Any parts of the resized image that fall outside the div are cropped.

Container-sized Background Image

These examples demonstrate a third responsive site-friendly CSS rule for background images.

The background image is automatically resized to the largest it can be and still be entirely contained within the div.

The two examples use the same CSS definitions except the height of the div.

Because the height is all that differs, only the source code of the first div is here:

<div style="
   height: 100px; width: 250px; border: 1px solid black; 
   background-image: url(https://www.willmaster.com/library/images/background-sample-250.jpg);
   background-repeat: no-repeat;
   background-position: center center;
   background-size: contain;
   ">
</div>

The CSS property background-size has the value "contain" (colored blue).

The entire image is contained within the div, resized as large as possible with it's width and height proportions maintained.

Notes

For scrolling divs where the background image should not scroll with the content, use this CSS rule:
```
background-attachment: fixed;
```
The three responsive background image CSS rules are CSS3. All are recognized by the latest versions of each of the five major browsers.

The first 6 of the 9 CSS rules described here have fixed-size background images. The images may be cropped if they don't fit exactly within the div.

Tiled Background Image
Horizontally-tiled Background Image
Vertically-tiled Background Image
Untiled Background Image
Centered Background Image
Static-sized Background Image

The other 3 of the 9 CSS rules described here can be used on responsive websites, with the background images automatically resizing themselves as needed to accomodate any resizing of the div.

Responsive-sized Background Image
Full-cover Background Image
Container-sized Background Image

The nine different CSS rules give you ways to implement widely-differing methods of publishing background images in divs.

For a slide-show effect with background images, which requires JavaScript in addition to CSS, see Background Image Slide Show.

(This article first appeared in Possibilities ezine.)

Will Bontrager

We only suggest and recommend what we believe is of value. As remuneration for the time and research involved to provide quality links, we generally use affiliate links when we can. Whenever we link to something not our own, you should assume they are affiliate links or that we benefit in some way.