background (CSS property)

Description

The background property is a shorthand property that allows all the individual background properties to be set in a single declaration (including background-color, background-image, background-repeat, background-attachment, and background-position).

Using this shorthand property, we can set the color of the background (the background-color), and supply the URI of an image to be used on the background at the same time. The remaining properties dictate how and where the image is placed.

As with other shorthand properties, any values that aren’t specified will be set to their defaults. This has implications if, for instance, the background-color is defined as follows:

#example{
 background: red;
}

In the above example, all the omitted values will be set to their default states—for background-image, the default is none. If the element already had a background image defined, that specification would be negated, and no image would appear. Therefore, when you’re using the shorthand property, take care to ensure that no conflicts exist. That said, it’s common practice to use background rather than background-color because the former property is shorter. There’s no problem in doing this—as long as you realize the consequences.

The background of an element is the area covered by the width and height of that element (whether those dimensions are set explicitly, or the content dictates them); it also includes the area covered by padding and borders. A background-color (or background-image) that’s applied to an element will appear beneath the foreground content of that element, and the area covered by the padding and border properties for the element. This coverage area is evident where an element has transparent (or dotted or dashed) borders, and the background is seen beneath the borders (or between the dots). Note that Internet Explorer versions up to and including 6 don’t support transparent borders.

The tiling and positioning of the background-image on inline elements isn’t defined in the CSS2.1 specification, but it might be addressed in future versions.

Value

• background-color sets the color of the background.

• background-image supplies the address of an image to be used on the background.

• background-repeat specifies whether a background-image is repeated (tiled) or not, and also defines the axis along which the image will repeat.

• background-attachment determines whether the background-image is to scroll with the document or remain fixed to the viewport.

• background-position specifies the initial starting position of the background-image.

Refer to the individual properties for their specific details, and the initial and allowed values for each.

Compatibility

Internet Explorer for Windows versions up to and including 6 incorrectly implement the value fixed for the property background-attachment and place the background-image in relation to its containing block instead of the viewport. The result is that fixed only really works when the background-image is applied to the html or body elements, since they’re effectively equivalent to the viewport. When a background-attachment value of fixed is applied to other elements on the page, it will fix the image to that element, not the viewport.

Internet Explorer version 7 implemented the scroll value incorrectly in cases where it’s used on a container that has a scroll mechanism—when overflow is set to a value other than visible. In such cases, the background-image scrolls with the content when it should in fact remain in view at the position specified. Internet Explorer versions 6 and below exhibit the same behavior as IE 7 in this respect; however, using the value fixed instead of scroll will cause IE versions 6 and below to exhibit the behavior defined in the specifications for scroll.

Internet Explorer for Windows versions up to and including 7 will only apply the background from inside the border’s edge when the element in question has a layout. If the element does not have a layout, the background-color or background-image will slide under the borders as per the specifications.

Internet Explorer for Windows version 8 has a 1px vertical jog while scrolling on a background-image that is applied to an element that has overflow set to scroll or auto (source Bruno Fassino) .

In Internet Explorer for Windows version 8 a background-position with a value of top when used on an inline element in conjunction with vertical-aligntop is incorrectly calculated when its sibling is an inline IMG element with a greater line-box height (bug documented by James Hopkins).

In Internet Explorer for Windows version 8 an animated transparent GIF that is repeated using repeat-x or repeat-y fails and the transparency is replaced as a solid black colour.

In Internet Explorer version 8 a background-image image applied to a tr element (or an element with display:table applied) using a background-position of 100% 0 (i.e. the right position as opposed to left) will align the right edge of the image with the right edge of the first table cell rather than the right edge of the table row. Safari up to and including version 4 and Chrome up to and including version 3 have a similar bug but will repeat the image on every cell.

Safari versions up to and including 2.0 exhibit a background-repeat bug: the image is repeated incorrectly when no-repeat has been applied. This bug is evident when the image’s height exceeds that of the element to which it’s applied, and when the image is offset from the top position. In these cases, the image will repeat upwards, filling in the area immediately above the point at which the image was initially placed.

Internet Explorer for Windows versions up to and including 7 don’t support the value inherit.

Internet Explorer for Windows versions up to and including 8 have a shorthand bug where the background-image will fail to show if a white space isn’t included after the closing bracket containing the URI and is also immediately followed by more shorthand properties (e.g. background:url(image.gif)no-repeat;— notice that there would need to be a space after the bracket and before the no-repeat value).