Backgrounds

This page tests the various declarations of the CSS3 Backgrounds and Borders module.

Compatibility

I left the default values out of this table; they’ve been supported forever.

Multiple background images

Assigning more than one background image to an element.

div.multiple {
	background-image: url(../pix/logo_quirksmode.gif), url(../pix/logo_quirksmode_inverted.gif);
	background-repeat: repeat-y;
	background-position: top left, top right;
	width: 385px;
	height: 100px;
	border: 1px solid #000000;
}

All properties can have several values separated by commas. If a property has one value it counts for all background images (repeat-y in the example).

Background image example

This is the example element we're going to use for the next series of tests:

It has the following styles; the relevant background-* will be added inline:

div.test {
	background-image: url(/pix/logo_quirksmode.gif);
	border: 5px solid transparent;
	padding: 10px;
	width: 400px;
	height: 52px;
	overflow: auto;
	color: #999999;
	margin: 5px 0;
}

background-attachment

How is the background image attached to its element? Does it scroll with the element, the document, or not at all?

scroll (default)

The background image scrolls with the document. And no, the name of this value has never made any sense, but it seems we’re stuck with it.

fixed

Background is fixed relative to the entire window. The element merely serves as a viewport through which you look at the background image.

In order to see the fixed background in action, scroll the main window slowly.

local

The background scrolls with the element.

background-repeat

How does the background repeat? Horizontally, vertically, not at all, or does it try to cover the box with a whole number of iterations?

repeat (default)

The image repeats unchecked.

repeat-x

The image repeats only horizontally.

repeat-y

The image repeats only vertically.

no-repeat

The image does not repeat.

space

The image repeats, but only as many times as it fits the box completely After that, the repeats are spaced evenly across the box.

round

The image repeats, but if it does not fit the box a whole number of times, it is reduced in size until it does.

background-clip

Which area does the background image fill? The padding box, the content box, or the border box? Remove border for a good idea of what’s going on.

border-box (default)

The background fills the border box.

padding-box

The background fills the padding box.

content-box

The background fills the content box.

background-origin

Where does the background image originate? In the padding box, the content box, or the border box?

padding-box (default)

The background originates in the padding box.

border-box

The background originates in the border box.

content-box

The background originates in the content box.

background-size

What is the size of the background image? You can specify it in pixels, percentages, or scale it to fit the box.

auto (default)

The background image is sized normally.

length

The background image’s size is determined by this property (50px 20px in the example).

percentage

The background images’s size is determined by this property (50% 10% in the example). Effectively, this allows you to state how many times the background image is shown, though resizing will occur.

contain

The image is scaled to the largest size that allows it to fit in the box, while retaining proper aspect ratio.

cover

The image is scaled to the largest size that allows it to cover the box completely, while retaining proper aspect ratio.

Border images

Using an image for the border.

Chrome note

There’s a difference between Chrome Windows on the one hand, and all other browsers, including Chrome Mac, on the other. That would usually mean that Chrome Windows is wrong and the others are right, but I think its take on this example is the correct one. So I’m undecided.