background

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
Inspect me!?

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.
Example
Inspect me!?

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 it’s possible to use the values padding-box and content-box (Firefox 3.6 uses border and padding instead, content is not supported).
Example
Inspect me!?

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.
Example
Inspect me!?

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.
Example
Inspect me!?

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).
Example
Inspect me!?

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.
Example
Inspect me!?

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.
Example
Inspect me!?

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).
Example
Example
Inspect me!?

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.
Example
Inspect me!?

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.
Example
Inspect me!?

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).

x The live view can be examined using an element inspector like Firefox’s Firebug. Many browsers already have such an inspector build in. In each case right click on the example and then select “Inspect element”. Now an area in your browser opens where you see the HTML code of the example on the left side and the CSS on the right side for further investigation.
  • http://www.mannystudios.com Manny

    Nice post and site! Definitely helpful for those just learning CSS.

  • http://mimoymima.com Brent Lagerman

    Your compatibility chart shows ie9, is there any easy way to get this stuff working with ie7&8?

    brent
    @
    mimoymima.com

    • http://www.css3files.com Christian Krammer

      Hey Brent! Drop me a line at the contact form if you want to discuss this issue!

      In short: There is no easy way for IE < 9 to achieve multiple backgrounds and the other properties on this page. But especially multiple bgs are possible although a little bit more complicated.

  • Martijn

    What’s wrong with Opera and background-position? You claim O doesn;t apply correctly, but you never explain how/why/when.

    • http://www.css3files.com Christian Krammer

      I am very sorry that I haven’t further explained this issue but space is limited.

      As soon as multiple backgrounds are set Opera seems to assume that there is a right padding that isn’t really there. So for example if an image is set to “center” it has an offset to the left instead of being absolutely centered.

  • http://www.webdesign-ieftin.com designarti

    So, for now, to use these properties on my website, I should always keep in mind to add extra code for IE < 9. And from what I have heard, Microsoft does not intend to implement CSS3 in older versions than 9.
    My question is…
    Should I use CSS3 or not?
    Kind of time killer that extra code.

    • http://www.css3files.com Christian Krammer

      You definitely should! The extra work really pays of because it makes your site future proof – and prettier, faster, … Currently all major browser support a great range of CSS3 properties, and the people with browsers that don’t (like IE < 9) won’t miss it.

      Apart form that you show that you are a forward thinking, modern web designer if you use CSS3. It is the future, respectively the presence. Refuse yourself to CSS3 and you will be refused yourself very soon.

  • Pallavi Kuthe

    Excellent site and very helpful!!!!!!Keep up the good work.

  • http://www.thescube.com Shovan Sargunam

    Nice one, should help me with my design.

    Thanks m8