Background

Multiple backgrounds are supported through the standard background property in CSS3. Not only images are possible but also gradients.

Compatibility

background Firefox 4+ Safari 5+, Chrome 10+ Internet Explorer 9+ Opera 11+ iOS 3.2+ Android 2.1+ Opera Mini 5+ Blackberry 7+ IE Mobile 10+

Supported by all modern browsers. For detailed compatibility info see caniuse.com.

Firefox 4+Safari 5+, Chrome 10+Internet Explorer 9+Opera 11+
iOS 3.2+Android 2.1+Opera Mini 5+Blackberry 7+IE Mobile 10+

General description

The different backgrounds get stacked atop where the first is closest to the viewer. They are separated by commas.

background: 1 url(image1.png), 2 url(image2.png), 3 url(image3.png) 4 #383838

  1. The first background image. This is the image that is closest to the viewer. Every background image can have the general values of the background property, where the most important are background-position and background-repeat. By default they are positioned top left and get repeated at the x- and y-axis.
  2. The second background image, layered under the first one.
  3. The third background image which is the lowermost.
  4. The general background color of the element. Can be only set last, no comma preceded.

Example

Three background images with different values

background: 1 url(image1.png) right bottom, 2 url(image2.png) center, 3 url(image3.png)

  1. The first background image is alligned horizontally right and vertically bottom. It is assumed that background-repeat is set to no-repeat to prevent it from repeating at the whole background (like all the other images in this stack).
  2. The second background image, centered horizontally and vertically.
  3. The third background image by default alligned top left.

Further reading

For more info see the W3C site, the MSDN site and the site at MDN.

background-clip

Sets the visible range of the background including background images.

Compatibility

-webkit-background-clip Android 2.2+
background-clip Firefox 4+ Safari 5+, Chrome 10+ Internet Explorer 9+ Opera 11+ iOS 4+ Opera Mini 5+ Blackberry 7+ IE Mobile 10+

Only partially supported by Opera Mini. For detailed compatibility info see caniuse.com.

Firefox 4+Safari 5+, Chrome 10+Internet Explorer 9+Opera 11+
iOS 4+Android 2.2+Opera Mini 5+Blackberry 7+IE Mobile 10+

General description

background-clip: 1 border-box

  1. By default the background of a box (element) is drawn beneath the border, that is the border covers it (= border-box, default value). To change this behaviour its possible to use the values padding-box and content-box (Firefox 3.6 uses border and padding instead, content is not supported).

Examples

Not covered by the border

background-clip: 1 padding-box

  1. If a border is set the background starts directly within it, everything outside gets clipped. Same as the default value (border-box) when no border is set.

Applied within the padding

background-clip: 1 content-box

  1. If a padding is set the background gets applied within it, everything outside is clipped. Same as padding-box when no padding is set, same as padding-box and border-box when no padding and no border are set.

Further reading

For more info see the W3C site, the Safari site, the MSDN site and the site at MDN (including compatibility info for older browser versions).

background-origin

Defines where the background image(s) is/are positioned.

Compatibility

-webkit-background-origin Android 2.2+
background-origin Firefox 4+ Safari 5+, Chrome 10+ Internet Exlorer 9 Opera 11+ iOS 4+ Opera Mini 5+ Blackberry 7+ IE Mobile 10+

Supported by all modern browsers. For detailed compatibility info see caniuse.com.

Firefox 4+Safari 5+, Chrome 10+Internet Explorer 9+Opera 11+
iOS 4+Android 2.2+Opera Mini 5+Blackberry 7+IE Mobile 10+

General description

background-origin: 1 padding-box

  1. When background images are applied they directly start at the outer dimensions of the containing element (= padding-box, default value). In the presence of a border they start directly within it. Can also be content-box or border-box (Firefox 3.6 uses padding, content and border).

Examples

Covered by the border

background-origin: 1 border-box

  1. If a border is set it covers the background images. Same as padding-box when no border is set.

Applied within the padding

background-origin: 1 content-box

  1. If a padding is set the background image gets applied within it. Same as padding-box when no padding is set, same as padding-box and border-box when no padding and no border are set.

Further reading

For more info see the W3C site, the Safari site, the MSDN site and the site at MDN (including compatibility info for older browser versions).

background-size

Is used to resize the background image(s).

Compatibility

-webkit-background-size Android 2.2+
background-size Firefox 4+ Safari 5+, Chrome 10+ Internet Exlorer 9 Opera 11+ iOS 4+ Opera Mini 5+ Blackberry 7+ IE Mobile 10+

Supported by all modern browsers. For detailed compatibility info see caniuse.com.

Firefox 4+Safari 5+, Chrome 10+Internet Explorer 9+Opera 11+
iOS 4+Android 2.2+Opera Mini 5+Blackberry 7+IE Mobile 10+

General description

background-size: 1 50% 2 25%

  1. The horizontal size of the background image, in this case 50% of the width of the element (not of the original image size). Can also be set in absolute (px) or relative (em) units, can be auto (original size, default), cover or contain. In combination with multiple background images the different values are separated by commas.
  2. Optional. The vertical size of the background image, in this case 25% of the height of containing element. If not set it is assumed to be auto.

Examples

Backgrounds images with different values set

background-size: 1 50% 100%, 2 33% 33%, 3 auto, 4 100px

  1. The background size is set to half the width of the element and the full height (alligned bottom left through background-position).
  2. Background image is set to both 33% of the width and the height of the element (image is alligned bottom right).
  3. The original background size is preserved. Important when multiple backgrounds are set and resized and one should keep the original size (not depicted).
  4. Image size set to 100px horizontally and vertically (not depicted).

Whole background covered

background-size: 1 cover

  1. The background image is resized so that either its width or height (the smaller one) covers the whole element. The aspect ratio is preserved.

Resized to fit

background-size: 1 contain

  1. The background image is resized so that its width or height (the bigger one) fits inside the element. The aspect ratio is preserved.