background-image (CSS property)

Spec
Inherited Initial Version
No none CSS1
Browser support (more…)
IE5.5+ FF1+ SA1.3+ OP9.2+ CH2+
Buggy Full Full Full Full

Syntax

background-image: { uri | none | inherit } ;

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.

Example

This style rule assigns a background image to the element with ID "example" :

#example {
  background-image:
  ➥    url(images/bg.gif);
}

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

Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
Buggy Buggy Buggy Buggy Full Full Full Full Full Full Full Full Full Full Full Full 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 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) .

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

Previous / Next page

  1. Previous
  2. Next

Related reference material

User-contributed notes

ID:
#5
Contributed:
by waldemarweber
Date:
Fri, 07 May 2010 14:11:43 GMT
Status:
This note has not yet been confirmed for accuracy and relevance.

I appreciate the third paragraph of the description, which discusses some reasons why a background image may not display. For the sake of completeness, I would also note that parentheses should be avoided in its file name, since some (perhaps most) browsers tend to match the first opening parenthesis with the first closing one when they parse the following example in which nested expressions become introduced by the required syntax.

url(background_image_file_name_with_(parenthetical_expression).jpg)

Similar considerations may extend to the file names of any folders that contain the background image, especially if they would also appear within the relative position.

ID:
#4
Contributed:
by sova
Date:
Thu, 04 Mar 2010 15:55:59 GMT
Status:
This note has not yet been confirmed for accuracy and relevance.

Firefox 3.6 has trouble finding images in your demos like url(leaves.jpg) - it looks for them at the root like http://reference.sitepoint.com/leaves.jpg whereas this particular image is at http://reference.sitepoint.com/static/reference/livedemos/leaves.jpg. Opera 10 and IE8 have no such trouble.

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.

Related Products