CSS3 Tests: Background Properties

With the new CSS3 background properties, you can pretty much control all background image/color aspects.

Explanation

I test the new properties including background-clip and background-size. Please see the spec for reference.

These new properties will give incredible control over backgrounds. CSS3 will give you incredible control over [X]HTML documents in general.

background-clip

Below there are two divs: one with background-clip: padding and the second with background-clip: border. The Spec does a better job of explaining how this should work than I do.

This div has background-clip: padding.

This div has background-clip: border.

Supported: No browser…Safari 1.2 pending.

background-size

With this property you can [suprise!!] control the size of the background.

This div has background-size: 15px. The background image should be really small.

Support: None.

background-quantity

This property is long overdue. It specifies how many times the background image should repeat. The below div has this testsheet:

div.bgquant {
background-image: url(qtest.gif);
background-repeat: repeat-y;
background-quantity: 3;
height: 5%;
border: 3px solid #333;
padding: 6px;
}

This div should have three image as a background (background-quantity: 3).

Support: None.

background-spacing

With this property you can specify a space between images.

The test image:

This div has background-spacing: 1px. There should be a 1 pixel space between images.