background (CSS property)
| IE5.5+ | FF1+ | Saf3+ | Op9.2+ |
|---|---|---|---|
| Buggy | Full | Full | Full |
| Inherited | Initial | Version |
|---|---|---|
| No | CSS1, 2.1 |
Example
This style rule simultaneously assigns
values to all the individual background properties of the element with ID
"example":
#example{
background: #fff url(image.gif)
➥ no-repeat fixed left top;
}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-colorsets the color of the background.background-imagesupplies the address of an image to be used on the background.background-repeatspecifies whether abackground-imageis repeated (tiled) or not, and also defines the axis along which the image will repeat.background-attachmentdetermines whether thebackground-imageis toscrollwith the document or remainfixedto the viewport.background-positionspecifies the initial starting position of thebackground-image.
Refer to the individual properties for their specific details, and the initial and allowed values for each.
Compatibility
| IE | 5.5 | Buggy |
|---|---|---|
| 6.0 | Buggy | |
| 7.0 | Buggy | |
| Firefox | 1.0 | Full |
| 1.5 | Full | |
| 2.0 | Full | |
| Safari | 1.3 | Buggy |
| 2.0 | Buggy | |
| 3.0 | Full | |
| Opera | 9.2 | Full |
| 9.5 | Full |
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-position 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.
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.
Related Reading
User-contributed notes
Add a note
To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.
