CSS Attributes Index   Color and Background Attributes

---

Sets or retrieves the background image of the object.

CSS	{ background-image: 'url ( 'sUrl' ) ' | 'none' }
Script	object.style.backgroundImage = strUrl ]

none	The color of the next parent background will shine through.
sUrl	URL path to an image.

The property is read/write with a default value of none; this attribute is not inherited.

The URL identifies the image file. When setting a background image, it’s a good idea to also set a background color to be used when the image is unavailable. When the image is available, it overlays the background color.

This property may be set together with the other background properties using the background composite property.

Microsoft^® Internet Explorer^® 3.0 supports the background-image attribute, but only when it’s set through the background attribute.

The following examples demonstrate use of inline event handlers to dynamically set the background image of an element. Both methods yield the same effect.

The sample below defines background-image style attributes in an embedded stylesheet, and invokes calls to the stylesheet to show or hide the background image in response to mouse events.

<style type="text/css">
<!--
   .over {
      background-image: url( '../shared/images/back1.jpg' ); color: beige }
   .out {
      background-image: none }
-->
</style>
...
<p onmouseover="this.className='over'"
   onmouseout="this.className='out'">
   ...
</p>

 Show me 

The sample below uses inline event handlers to dynamically change an object’s background image in response to mouse events.

<p style="font: bold 13pt arial; padding: 10; color: beige; 
      background-image: url( '../shared/images/heads.jpg' )"
   onmouseover="this.style.backgroundImage='url( ../shared/images/links.jpg ) '"
   onmouseout="this.style.backgroundImage='url( ../shared/images/heads.jpg )'">
   ...
</p>

 Show me 

background, background-attachment, background-color, background-position, background-repeat