Standardista

There are 8 attributes controlling background images, including those added in CSS3. This blog post goes over all the CSS2.1 and CSS3 background properties, values and browser support, how to target those properties via the DOM, with information on bugs you may find when implementing background properties.

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

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 fixed as scroll and scroll as local. Since scroll is the default, scroll renders as local, and the browser ignores the keyterm local, you can actually use local in these browsers as it will render local correctly.

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 | currentcolor;

Browser support for background-attachment

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

background-image browser bugs

IE6 has several bugs with background images that are worth noting.

1. 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.
2. 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.
3. For background images on links, IE6 fetches the image from the server for every “hover”, causing flickering.
4. IE6 does not handle transparency of PNGs. Use proprietary filter to get around this bug
5. If the background-image of a link is a transparent PNG, the link will not work in IE6.
6. 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:

1. The IE7 zoom function does not increase the size of background images.
2. 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%;
background-position: 0 0, 50% 50%, 100% 100%; /* multiple placements */

Browser support for background-position

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. This property was added by MS for IE5.5, made it into the CSS3 specifications for a while, but was removed in 2009.

Property Values for background-position-x

background-position-x: center | inherit | left | right | px/em | %;

Browser support for background-position-x

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

DOM

document.getElementById("myID").style.backgroundPositionY

Background-repeat

Property Values for background-repeat

background-repeat: 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

DOM

document.getElementById("myID").style.background

CSS3 Background Properties

The specifications are not yet finalized, but we’re getting close.

background-clip

With possible values of border-box | padding-box, 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.
Supporting browsers also support content-box, which is not in the CSS3 specifications at this time. Border box is the default. Webkit uses both -webkit-border and -webkit-border-box. Firefox uses -moz-background-clip, and does not include the term ‘box’ in the value. The syntax may change.

Property Values for background-clip

background-clip: [border-box | padding-box ] [ , [border-box | padding-box ] ]* ;
-moz-background-clip: border;
-webkit-background-clip: border-box;

Browser support for background-clip

DOM

document.getElementById("myID").style.backgroundClip

background-origin

Determines how the ‘background-position’ is calculated. Takes one or two parameters: border-box | padding-box | content-box. With a value of ‘padding-box’, 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-box’ means the position is relative to the border edge, and ‘content-box’ 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. Unlike clip, the value of content-box is in the proposed specifications.

Note that the spec has changed. Mozilla and webkit have support, but use the original value terms of border | padding | content instead of the currect proposed specifications border-box | padding-box | content-box.

Property Values for background-origin

background-origin: [border-box | padding-box | content-box ] [ , [border-box | padding-box  | content-box] ]* ;
-moz-background-origin: border; /* does not yet support multiple images, so no support for multiple values */
-webkit-background-origin: border-box, padding-box, border-box;

Browser support for background-origin

DOM

document.getElementById("myID").style.backgroundOrigin

background-size

Supported by Opera, Safari and Chrome, and Firefox shortly, use -o-background-size, -webkit-background-size. The background-size property specifies the size of the background images. The ‘contain’ values scales the image, while preserving its aspect ratio (if any), which may leave uncovered space. The ‘cover’ scales the image so that it covers the whole area, completely covering the element, but perhaps not showing part of the image if the element and the image did not have the same aspect ratio.
see background-size specifications at the W3C

DOM

document.getElementById("myID").style.backgroundSize

background-break

background-break was removed from the CSS3 w3C specifications.

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.