background-image (CSS property)
| IE5.5+ | FF1+ | Saf1.3+ | Op9.2+ |
|---|---|---|---|
| Buggy | Full | Full | Full |
| Inherited | Initial | Version |
|---|---|---|
| No | none |
CSS1 |
Example
This style rule assigns a background
image to the element with ID "example" :
#example {
background-image:
➥ url(images/bg.gif);
}Description
This property sets the
background image of an element via the specified URI. The image is placed
on top of the background-color, and if the image is
opaque, the background-color will not be visible
beneath it. When you’re setting a background-image,
also set a background-color, where possible, in case
the image is unavailable.
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.
Some area of the
element in question must be visible so that the
background-image can show through. If the element has
no intrinsic height (either defined by its content or dimensions), the
background won’t have any space in which to display. If an element
contains only floated children which haven’t been cleared—see clear—again, the background won’t display, since the
element’s height will be zero.
By default, the
background-image is placed at the top-left
(background-position) of the element; it’s repeated
along the x and y axes
(background-repeat) and will scroll with the document.
These are the default settings that apply if you haven’t explicitly set
any others, and can be adjusted with the other background properties.
Refer to the other relevant stuff below for methods you can use to
position and control the image.
Value
A URI value specifies a location at which the image can be found.
The value none ensures that no
background-image will be displayed; this is the default
setting, so you don’t need to define it explicitly unless you want to
override previous background-image
declarations.
The value inherit would cause the
element to inherit the background-image of its parent.
This approach would not normally be taken, as the element’s inherited
background image would most likely overlap the parent’s image. In most
cases, the parent’s background-image will be visible
through the element’s transparent background unless
another background-image or
background-color has been set.
Compatibility
| IE | 5.5 | Buggy |
|---|---|---|
| 6.0 | Buggy | |
| 7.0 | Buggy | |
| Firefox | 1.0 | Full |
| 1.5 | Full | |
| 2.0 | Full | |
| Safari | 1.3 | Full |
| 2.0 | Full | |
| 3.0 | Full | |
| Opera | 9.2 | Full |
| 9.5 | Full |
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 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.
