backgroundImage Property (A, ADDRESS, B, ...)

backgroundImage Property

Switch on low bandwidth view

Language Filter

background-image Attribute | backgroundImage Property

Sets or retrieves the background image of the object.

Syntax

HTML { background-image : sLocation }
Scripting [ sLocation = ] object.style.backgroundImage

HTML	{ background-image : sLocation }
Scripting	[ sLocation = ] object.style.backgroundImage

Possible Values

sLocation String that specifies or receives one of the following values.
none
Default. Color of the next parent through which the background is visible.
url(sUrl)
Location of the background image, where sUrl is an absolute or relative URL.
The property is read/write for all objects except the following, for which it is read-only: currentStyle. The property has a default value of none. The Cascading Style Sheets (CSS) attribute is not inherited.
DHTML expressions can be used in place of the preceding value(s). As of Internet Explorer 8, expressions are not supported in IE8 mode. For more information, see About Dynamic Properties.

Remarks

The URL identifies the image file. When setting a background image, you can set a background color to use when the image is unavailable. When the image is available, it overlays the background color.
This property can be set with other background properties by 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.

Examples

The following examples use the background-image attribute and the backgroundImage property to specify the background's image.
This example uses a call to an embedded (global) style sheet to show and hide the background image.
<style type="text/css">
.setUrl {
    background-image: url(sphere.jpg);
}
.loseUrl {
    background-image: url(none);
}
</style>
</head>

<body>

<span style="font-size: 14px" onmouseover="this.className='setUrl'" onmouseout="this.className='loseUrl'">
. . . </span>
This feature requires Microsoft Internet Explorer 4.0 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

This example uses inline scripting to show and hide the background image.
<span onmouseover="this.style.backgroundImage='url(sphere.jpeg)'">
. . . </span>
This feature requires Microsoft Internet Explorer 4.0 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

Standards Information

This property is defined in Cascading Style Sheets (CSS), Level 1 (CSS1) .

Applies To

A, ADDRESS, B, BIG, BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, currentStyle, CUSTOM, DD, defaults, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FORM, hn, HTML, I, IMG, INPUT type=button, INPUT type=checkbox, INPUT type=file, INPUT type=image, INPUT type=password, INPUT type=radio, INPUT type=reset, INPUT type=submit, INPUT type=text, ISINDEX, KBD, LABEL, LEGEND, LI, LISTING, MARQUEE, MENU, NOBR, OL, P, PLAINTEXT, PRE, runtimeStyle, S, SAMP, SMALL, SPAN, STRIKE, STRONG, style, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP, CSSCurrentStyleDeclaration Constructor, CSSRuleStyleDeclaration Constructor, CSSStyleDeclaration Constructor

Tags

: Add a tag

Community Content

Add new content

Annotations

How to stretch a background image.

John Sudds ... Thomas Lee | Edit | Show History

CSS2 does not provide a mechanism to stretch a background image. To do this, you need to create two divs: one that contains a stretched image, and another to overlay content above it.

<style type="text/css">
#image {
 position:fixed;
 top:0;
 left:0;
 width:100%;
 height:100%;
}
#image img {
 width:100%;
 height:100%; 
}
#content {
 position:relative;
 z-index:1;
}
</style>

<div id="image"><img src="background.jpg" alt=""/></div>
<div id="content">
<p>This text appears in the foreground.</p>
</div>

The example above works well in IE7. To approximate the effect in IE6, add the following rules:

<!--[if IE 6]>
<style>
#image {
 position:absolute;
 z-index:-1;
}
#content {
 position:static;
}
</style>
<![endif]-->

Or ... style=filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='background.jpg',sizingMethod='scale') ... Ray.