• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 14. Background Properties > background-image Property

14.2. background-image Property

background-image enables a Web author to set a graphic image as the background image for an element on a Web page. It works in much the same manner as does the background attribute to the body element, but its CSS counterpart allows background to be set for pretty much any element on a Web page.

It can take a URL value (or an inherit value if it points to an image file), which points to the background image. The browser then takes the image and begins tiling it “under” the element it is associated with. The following code snippet shows how it can be added to a sample Web element (in this case the body element):

<body style="background-image: url(picture.gif)">

If you want to specify an image contained on a different Web server (or just want to point to it in absolute terms), you have to add the full URL, as depicted in the following code snippet:

<body style="background-image: url(http://www.corecss.com/images/picture.gif)">


The background-image property can be associated with any Web page element that can be displayed on screen. For example, the following Web page (illustrated in Figure 14-3) gives you an idea of how it can be used:

Listing 14.2. background-image Example Code

.commodus {background-image: url(commodus.jpg); font-size: large; 
color: black}
.claudius {background-image: url(claudius.jpg); font-size: large; 
color: silver}
<body class="claudius">
The body of this page is tiled using a coin depicting Roman Emperor 
Claudius. He was a grandson of the first Roman Emperor Augustus, 
and he reigned from 41-54 A.D. The fictional work <cite>I, 
Claudius</cite> is based on his life.

<table border width="50%" cellpadding="5" class="commodus">
<td>This table contains a tiled background image of a coin of
Roman Emperor Commodus. The movie <cite>Gladiator</cite> casts him 
as part of the story.</td>

<ol class="commodus">
<li>This list of elements also has a tiled</li>
<li>background of Roman Emperor Aurian</li>
<li>While this page will never win an award</li>
<li>for beauty, it does get the point across that you can add <code>background-image</code></li>
<li>to just about anything.</li>



Figure 14-3. background-image example code as depicted in Internet Explorer 6.0.

This property can be thought of as the “foundation” property of the background family of CSS properties, as all of the other properties in this family (with the sole exception of background-color) are used to modify its behavior. All of these other properties are treated separately in this chapter.

Browser Compatibility

This property is fully supported in the more recent versions of both Internet Explorer and Netscape Navigator, so it is considered safe to use.

  • Internet Explorer 3.0: Unsafe.

  • Internet Explorer 4.0: Safe.

  • Internet Explorer 4.0 – 4.5 (Mac): Safe.

  • Internet Explorer 5.0: Safe.

  • Internet Explorer 5.1 – 5.2 (Mac): Safe.

  • Internet Explorer 5.5: Safe

  • Internet Explorer 6.0: Safe

  • Netscape Navigator 4.0 – 4.79: Safe, but quirky.

  • Netscape Navigator 4.0 (Mac & UNIX): Safe, but quirky. Ditto above.

  • Netscape Navigator 6.0: Safe.

  • Netscape Navigator 7.0: Safe.

  • Mozilla 1.0: Safe.

  • Opera 3.6: Safe.

  • Opera 5.0: Safe.

  • Opera 6.0: Safe.

  • Konqueror: Safe.

Internet Explorer has implemented this property since version 4.0, and is safe to use within this browser.

Netscape Navigator started implementing this feature beginning with version 4.x, but it does have one quirk: if you you are using a universal style sheet, you must use an http reference for the file, as a relative URL will “break” when the CSS page is accessed from a Web page at a lower level (in other words, Netscape Navigator looks at the relative URL in relation to the current page, instead of to the universal style sheet). This can cause problems if you are trying to demonstrate pages run locally without the use of a Web server. It is otherwise completely safe to use (and this problem was fixed in subsequent versions of this browser)

Opera was an early adopter of this property, and it has been implemented since version 3.6.

Konqueror also properly implements this property.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint