Backgrounds In CSS: Everything You Need To Know

Common Uses Of Backgrounds

Aside from their obvious use of making elements more attractive, backgrounds can be used for other purposes.

Faux Columns

When using the CSS property of float to position layout elements, ensuring that two (or more) columns are the same length can be difficult. If the lengths are different, then the background of one of the columns will be shorter than the background of the other, spoiling your design.

Faux columns is a very simple background trick that was first written up on A List Apart. The idea is simple: instead of applying a separate background for each column, apply one background image to the parent element of the columns with that image containing the designs for each column.

Text Replacement

Our choice of fonts on the Web is very limited. We could get custom fonts by using tools such as sIFR, but they require users to have JavaScript enabled. An easier solution that works on any browser is to create an image of the text in the font you want and use it as the background instead. This way, the text still appears in the markup for search engines and screen readers, but browsers will show your preferred font.

For example, your HTML markup could look like this:

<h3 class="blogroll">Blogroll</h3>

If we have a 200 by 75 pixel image of this text in a nicer font, then we could display that instead using the CSS as follows:

h3.blogroll {
	width: 200px;
	height: 75px;	/* So that the element will show the whole image. */
	background:url(blogroll-text.jpg) 0 0 no-repeat;	/* Sets the background image */
	text-indent: -9999px;	/* Hides the regular text by moving it 9999 pixels to the left */
	}

Easier Bullet Points

Bullet in an unordered list can look clunky. Instead of dealing with all of the different list-style properties, we can simply hide the bullets and replace them with a background image. Because the image can be anything you like, the bullets will look much nicer.

Here, we turn a regular unordered list into one with sleek bullets:

ul {
	list-style: none; /* Removes default bullets. */
	}

ul li {
	padding-left: 40px; /* Indents list items, leaving room for background image on the left. */
	background: url(bulletpoint.jpg) 0 0 no-repeat;
	}

Backgrounds in CSS 3

CSS 3 has many changes in store for backgrounds. The most obvious is the option for multiple background images, but it also comes with four new properties as well as adjustments to current properties.

Multiple Background Images

In CSS 3, you will be able to use more than one image for the background of an element. The code is the same as CSS 2, except you would separate images with a comma. The first declared image is positioned at the top of the element, with subsequent images "layered" beneath it, like so:

background-image: url(top-image.jpg), url(middle-image.jpg), url(bottom-image.jpg);

New Property: Background Clip

This brings us back to the issue discussed at the beginning of this article, about backgrounds being shown beneath the border. This is described as the "background painting area."

The background-clip property was created to give you more control over where backgrounds are displayed. The possible values are:

background-clip: border-box;
backgrounds displayed beneath the border.
background-clip: padding-box;
backgrounds displayed beneath the padding, not the border.
background-clip: content-box;
backgrounds displayed only beneath content, not border or padding.
background-clip: no-clip;
the default value, same as border-box.

New Property: Background Origin

This is used in conjunction with background-position. You can have the background-position calculated from the border, padding or content boxes (like background-clip).

background-origin: border-box;
background-position is calculated from the border.
background-origin: padding-box;
background-position is calculated from the padding box.
background-origin: content-box;
background-position is calculated from the content.

A good explanation of the differences between background-clip and background-origin is available on CSS3.info.

New Property: Background Size

The background-size property is used to resize your background image. There are a number of possible values:

background-size: contain;
scales down image to fit element (maintaining pixel aspect ratio).
background-size: cover;
expands image to fill element (maintaining pixel aspect ratio).
background-size: 100px 100px;
scales image to the sizes indicated.
background-size: 50% 100%;
scales image to the sizes indicated. Percentages are relative to the size of containing element.

You can read up on some examples of special cases on the CSS 3 specifications website.

New Property: Background Break

In CSS 3, elements can be split into separate boxes (e.g. to make an inline element span across several lines). The background-break property controls how the background is shown across the different boxes.

The possible values are:

Background-break: continuous;: the default value. Treats the boxes as if no space is between them (i.e. as if they are all in one box, with the background image applied to that).
Background-break: bounding-box;: takes the space between boxes into account.
Background-break: each-box;: treats each box in the element separately and re-draws the background individually for each one.

Changes to Background Color

The background-color property has a slight enhancement in CSS 3. In addition to specifying the background color, you can specify a "fall-back color" that is used if the bottom-layer background image of the element cannot be used.

This is done by adding a forward slash before the fall-back color, like so

background-color: green / blue;

In this example, the background color would be green. However, if the bottom-most background image cannot be used, then blue would be shown instead of green. If you do not specify a color before the slash, then it is assumed to be transparent.

Changes to Background Repeat

When an image is repeated in CSS 2, it is often cut off at the end of the element. CSS 3 introduces two new properties to fix this:

space: an equal amount of space is applied between the image tiles until they fill the element.
round: the image is scaled down until the tiles fit the element.

An example of background-repeat: space; is available on the CSS 3 specifications website.

Changes to Background Attachment

The background-attachment has a new possible value: local. This comes into play with elements that can scroll (i.e. are set to overflow: scroll;). When background-attachment is set to scroll, the background image will not scroll when the element’s content is scrolled.

With background-attachment:local now, the background scrolls when the element’s content is scrolled.

mactale.com