backgrounds

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

Example

This is the example element we're going to use throughout this page:

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

div.test {
	background-image: url(/pix/logo_quirksmode.gif);
	border: 5px solid #6374AB;
	padding: 10px;
	width: 200px;
	height: 200px;
}

background-repeat

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

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.

no-clip

The background fills the border box, but is not clipped (i.e. it may stretch outside the box).

background-origin

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

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.