B.5. background-image

This property sets the background image for an element. By default, element backgrounds are transparent, so the background image will show through nested elements, unless they have been assigned background colors or images of their own.

The positioning and tiling of a background image may be customized with the background-position and background-repeat properties, respectively.

Inherited: No

See also: Section B.3background-attachment, Section B.3background-color, Section B.6background-position, Section B.8background-repeat

B.5.1. Value

A URL or none. In CSS, URLs must be surrounded by the url() wrapper, not quotes. See the examples below.

Initial value: none

B.5.2. Compatibility

CSS Version: 1

Works in all CSS-compatible browsers, including Internet Explorer 4 or later and Netscape 4 or later.

Netscape 4 does not correctly fill a block element with its assigned background image, unless it has a border assigned (even a zero-width border will do), and setting any visible border leaves a transparent gap between the padding area of the block and its border in that browser. The Netscape 4 specific Section B.53layer-background-image property lets you fill that transparent gap.

B.5.3. Example

These style rules demonstrate assigning background images with relative, absolute, and fully-qualified URLs, respectively:

body {
  background-image: url(../images/texture.gif);
}

body {
  background-image: url(/images/texture.gif);
}

body {
  background-image: url(http://www.mysite.com/images/texture.gif);
}