CSS Background Properties: possible values, default values, browser support and DOM August 9, 2008
Everything you could possibly want to know about CSS Background Properties, including default values, browser support, targeting the DOM, and what to look for in CSS3.
There are 5 attributes controlling background images, with a few more being added when we have CSS3 support. This blog post goes over all the existing and future attributes, targeting them with the DOM, and lets you know of bugs you may find when implementing backgrounds.
background-attachmentbackground-colorbackground-imagebackground-positionbackground-position-x(not in the specifications)background-position-y(not in the specifications)
background-repeat- CSS3 background properties that may become relevant
and a shorthand: background, which includes the above attributes.
Each property has a list of possible values. Many developers use the "background:" shorthand. I advocate against using the shorthand, as I spend a lot of time correcting other people’s code when they forget to declare all the possible values, and therefore inadvertently set some of the attributes to their default values, when that was not their attention. For example, in th CSS reset script I recommend, the reset sets background-repeat: no-repeat;. When this reset value is included, if a coder writes background: url(myImg.gif); the background-repeat value gets reset to the default value of repeat — repeating along the x and y axis — which is almost never the intended value. Note that none of the background properties are inherited by default, though several do have "inherited" as a value option. See below for more information on the background shorthand.
background-attachment
The background-attachment attributes sets whether the background-image scrolls with the the document or remains fixed at the same location within the viewport. For example, if you include a "fixed" background image in a div, as the div scrolls up the page, the background image will stay in the same spot relative to the viewport, and will exit off the bottom edge of the div, disappearing from view, as the div moves up the screen. The default value is scroll. IE6 is the only grade-A browser that fails to support it correctly.
Property Values for background-attachment
background-attachment: fixed | scroll | inherit | local;
Browser support for background-attachment
| Internet Explorer 6 |
Internet Explorer 7 |
Internet Explorer 8 |
Firefox 2 | FireFox 3 | Safari 3 | |
|---|---|---|---|---|---|---|
| fixed | behaves as "scroll" | behaves as "scroll" | works, but the placement of the image is off. | |||
| scroll | behaves as "local" | behaves as "local" | ||||
| inherit | ||||||
| local | Works because it inherits scroll, which erroneously renders as local. | Works because it inherits scroll, which erroneously renders as local. |
background-attachment:fixed;
In elements with background images that are background-attachment:fixed; the position of the fixed image is relative to the viewport (the browser), not the element that it is in. In other words, if you declare a fixed background image, the image is positioned relative to the document window rather than relative to the element. Because of this, as you scroll thru the page, and your element with the background image that is fixed moves thru the viewport, the background image will come into view as it passes over the location of the otherwise hidden background image.
Note: background-attachment: local is a new value added in CSS3. "Local" is basically how "scroll" has been acting on scrolling elements in IE6 and IE7. An example is a div with "overflow: scroll." Generally, as you scroll thru to div, the background image stays exactly where it was initially in the scrolling div’s viewport. Using local, the div’s background image scrolls with the element’s content. In the case of ’scroll’, the background does not scroll with the element’s content, except in non-compliant IE6 and IE7. In the case of ‘local’, the background scrolls along with the element’s content.
Bugs:
- IE8 does suppord fixed and not local, but get’s the positioning of the background image wrong.
- IE6 and IE7 mistakingly renders
fixedasscrollandscrollaslocal. Sincescrollis the default,scrollrenders aslocal, and the browser ignores the keytermlocal, you can actually uselocalin these browsers as it will renderlocalcorrectly.
DOM
document.getElementById("myID").style.backgroundAttachment
background-color
Sets the background color of the element. The default value is transparent. This attribute, like all other background attributes, is NOT inherited. If you set a background image that is a transparent gif or transparent PNG, the color will show thru the transparent pixels. All browsers support background colors. The default value is "transparent". In using RGB instead of Hex values, you can either use integer range 0 - 255 or percent values of 0-100%. If you go over (300 or 110%), the browsers should reduce the value to the maximum allowable value (255 or 100%).
Note that if you mix RGB between integer and percents, some browsers will fail. If you include the wrong number of characters in a hex value, some browsers will ignore the declaration.
You can set the opacity or transparency level of the background color using background-color: rgba(255, 255, 255, 1);, where 255 is an integer between 0 and 255 or a percent value, and the 1 is any value between 0 and 1, with 0 being completely transparent and 1 being completely opaque. test page
IE6 and IE7 get "partially compliant" for RGB, since they erroneously display color if integers and percents are mixed. This may be a good thing, but it’s not in the specifications.
Note: Do not using mixed values in RGB, and do not use RGBA without browser targeting: both will fail completely in non-supporting browsers.
Note: IE6 sometimes completely chokes on background-color: transparent. For example, if you declare background-color: transparent on pop-out in a suckerfish menu, the links in that menu will not be clickable and it will display as black.
Property Values for background-color
background-color: transparent | rgb(255, 255, 255) / rgb(r%, g%, b%) | rgba(255, 255, 255, 1) / rgba(r%, g%, b%, 1) | #fff | #123456;
Browser support for background-attachment
| Internet Explorer 6 |
Internet Explorer 7 |
Internet Explorer 8 |
Firefox 2 | FireFox 3 | Safari 3 | Opera 9.5 | |
|---|---|---|---|---|---|---|---|
| transparent | |||||||
| rgb(r, g, b) | Renders with mixed values | Renders with mixed values | |||||
| #fff | |||||||
| #ffffff | |||||||
| rgba(r, g, b, a) | ignores the entire call | ignores the entire call | ignores the entire call | ignores the entire call | ignores the entire call |
DOM
document.getElementById("myID").style.backgroundColor
background-image
Property Values for background-image
background-image: inherit | none | url(relative to CSS); background-image: url(relative to css), url(second image); // CSS3 allows for multiple background images.
Browser support for background-image
| Internet Explorer 6 |
Internet Explorer 7 |
Internet Explorer 8 |
Firefox 2 | FireFox 3 | Safari 3 | Opera | |
|---|---|---|---|---|---|---|---|
| inherit | if url doesn’t work, neither does inherit | if the background image on parent doesn’t work, neither does inherit | if the background image on parent doesn’t work, neither does inherit | ||||
| none | |||||||
| url | needs to have adequate size to work | IE7 zoom function does not increase the size of background images | IE7 zoom function does not increase the size of background images | ||||
| url, url |
background-image browser bugs
IE6 has several bugs with background images that are worth noting.
- The area of an element with a background-image must be at least 2500 pixels, or the image may not display. Fix by giving area or hasLayout=true.
- The repeated background image position starts and ends at the inside of the border and is therefore not seen thru a dashed or dotted border. Compliant browsers start the image at 0 0, but repeat it thru the border on all sides.
- For background images on links, IE6 fetches the image from the server for every "hover", causing flickering.
- IE6 does not handle transparency of PNGs. Use proprietary filter to get around this bug
- If the background-image of a link is a transparent PNG, the link will not work in IE6.
- Using background images on <li>, <dd> and <dt> the background image may not render, especially if the list is placed within a floated, relatively-positioned parent.
IE7 and IE8 has bugs too:
- The IE7 zoom function does not increase the size of background images.
- Same as IE6, in IE7 and IE8 the repeated background image position starts and ends at the inside of the border and is therefore not seen thru a dashed or dotted border. Compliant browsers start the image at 0 0, but repeat it thru the border on all sides.
DOM
document.getElementById("myID").style.backgroundImage
background-position
Background position takes two values: left and top (in that order!) of the background image. If you only declare one attribute, the outcome depends on the type of value used (percent, measurement or keyword). The default value is "top left", well, actually, "0 0".
NOTE: If you are using anything other than the keyterms, make sure the order is LEFT and TOP in that order.
Property Values for background-position
background-position: bottom | center | inherit | left | right | top | 10px 10px | 50% 50%;
Browser support for background-position
| Internet Explorer 6 |
Internet Explorer 7 |
Internet Explorer 8 |
Firefox 2 | FireFox 3 | Safari 3 | |
|---|---|---|---|---|---|---|
| left/top | ||||||
| right/bottom | ||||||
| center | ||||||
| inherit | ||||||
| center | ||||||
| px | ||||||
| % |
Note that background position with percent values can be confusing! A background-position of X% will place the pixel that is X% from the left of the image at the pixel that is X% of the way in from the left of the element in which it is placed.
- For 0, the 0%, or left/top most pixel, will be placed at 0%, or the left/top.
- For 100%, the 100%, or right/bottom most pixel of the bg image, will be placed at 100%, or bottom/right of the element.
- For 50%, the middle of the image will be placed in the center of the element.
Any other percentage value is a bit more confusing:
A background-position of 25% will place the pixel that is 25% from the left of the image at the pixel that is 25% of the way in from the left of the element in which it is placed. If your image is 1000px wide, the pixel at 750px will be placed 75% in. In an element that is 1000px wide, it will be placed at 0,0. If your parent is 2000px, the pixel at 75% is 1500, so the 1000px background image will go from px 750 to 1750. Likely, that’s not what you want.
Because of this, know the width of the image and the width of the element before using percent (other than 0, 50% and 100%) when creating liquid layouts. If you have a content area that is 80% of the viewport, to put a faux column background image for a 25% width column, create a background image with a ratio of 1:3 that is wide enough to cover a wide scree browser., and place the background-position-x: 20%; (80% * 25% = 20%).
DOM
document.getElementById("myID").style.backgroundPosition
Background-position-x
Although not part of the W3C specifications, backgroundPositionX and backgroundPositionY are part of the DOM and supported by some browsers. Colors are not used in the following table, since I couldn’t figure out if green should mean it is supported or if green means it follows W3C specifications.
Property Values for background-position-x
background-position-x: center | inherit | left | right | px/em | %;
Browser support for background-position-x
| Internet Explorer 6 |
Internet Explorer 7 |
Internet Explorer 8 |
Firefox 2 | FireFox 3 | Safari 3 | Opera | |
|---|---|---|---|---|---|---|---|
| % | Supported | Supported | Supported | Supported | |||
| px (length) | Supported | Supported | Supported | Supported | |||
| left / center /right | Supported | Supported | Supported | Supported |
DOM
document.getElementById("myID").style.backgroundPositionX
background-position-y
Property Values for background-position-y
background-position: bottom | center | inherit | top | 10px | 2em | 50%;
Browser support for background-position-y
| Internet Explorer 6 |
Internet Explorer 7 |
Internet Explorer 8 |
Firefox 2 | FireFox 3 | Safari 3 | Opera | |
|---|---|---|---|---|---|---|---|
| % | Supported | Supported | Supported | Supported | |||
| px (length) | Supported | Supported | Supported | Supported | |||
| left / center /right | Supported | Supported | Supported | Supported |
DOM
document.getElementById("myID").style.backgroundPositionY
Background-repeat
Property Values for background-repeat
background-repeat: inherit | no-repeat | repeat | repeat-x | repeat-y;
| Internet Explorer 6 |
Internet Explorer 7 |
Internet Explorer 8 |
Firefox 2 | FireFox 3 | Safari 3 | |
|---|---|---|---|---|---|---|
| inherit | ||||||
| no-repeat | ||||||
| repeat | ||||||
| repeat-x / repeat-y |
DOM
document.getElementById("myID").style.backgroundRepeat
The background shorthand.
The background shorthand (or shortcut) attribute enables the declaration of all five background attributes in one statement. The values can be in any order, but are generally in the color, image, attachment, position and repeat order. If an attribute value is not specified, the value gets reset to the default value, which is why I recommend against using the shorthand. If you are going to use the shorthand, I recommend always following the CIAPR order to make debugging easier. The attribute values should be separated by a space. See the above attribute descriptions for default values and quirks (such as background-position attribute order).
Property Values and order for the background shorthand
background: background-color | background-image | background-attachment | background-position | background-repeat
Default Values for background when values aren’t explicitly declared
| Property | Internet Explorer 6 |
Internet Explorer 7 |
Internet Explorer 8 |
Firefox 2 | FireFox 3 | Safari 3 |
|---|---|---|---|---|---|---|
| background-color | transparent | transparent | transparent | transparent | transparent | transparent |
| background-image | none | none | none | none | none | none |
| background-attachment | "local" | "local" | scroll | scroll | scroll | scroll |
| background-position | 0 | 0 | 0 | 0 | 0 | 0 |
| background-repeat | repeat | repeat | repeat | repeat | repeat | repeat |
DOM
document.getElementById("myID").style.background
CSS3 Background Properties
The specifications don’t seem to be finalized, but it would seem that the first two will be incorporated, and the second two are being worked on (simply my guess, I don’t know for sure).
- background-clip
With possible values of border | padding, determines whether the background position is relative to the border or the padding, specifying whether an element’s background extends underneath its border. . This only has any visual effect when the border has transparent regions (because of border-style) or partially opaque regions; otherwise the border covers up the difference. The default value is "border", which is the effective default of all current browsers. Firefox 3 supports-moz-background-clip. Safari’s implementation is-webkit-background-clip. - background-origin
Determines how the ‘background-position’ is calculated. Takes one or two parameters: border | padding | content. With a value of ‘padding’, the position is relative to the padding edge (’0 0′ is the upper left corner of the padding edge, ‘100% 100%’ is the lower right corner). ‘Border’ means the position is relative to the border edge, and ‘content’ means relative to the content edge.Each comma-separated value applies to one image of ‘background-image’. This is useful only in safari at this point… but haven’t tested to see if supported. Safari’s current implementation is
-webkit-background-origin. Mozilla is supporting-moz-background-origin. Has no impact when background attachement is set to fixed. - background-size
see background-size specifications at the W3C - background-break
see background-break specifications at the W3C - background-inline-policy
Mozilla only, pecifies how the coordinate system for the background-position of an inline element is chosen when the content of the inline element wraps onto multiple lines. -moz-background-inline-policy values include bounding-box | continuous | each-box, with a default of continuous. Property has no effect when background-attachment is fixed.