Click to Rate and Give Feedback
MSDN
MSDN Library
Web Development
HTML and CSS
CSS Reference
Attributes
 background Property
background Attribute | background Property

Sets or retrieves up to five separate background properties of the object.

Syntax

HTML { background : sBackground }
Scripting[ sBackground = ] object.style.background

Possible Values

sBackgroundString that specifies or receives up to five of the following space-delimited values, in any order:
color
Any of the range of color values available to the backgroundColor property.
image
Any of the range of image values available to the backgroundImage property.
repeat
Any of the range of repeat values available to the backgroundRepeat property.
attachment
Any of the range of attachment values available to the backgroundAttachment property.
position
Any of the range of position values available to the backgroundPosition property.

The property is read/write. The property has a default value of transparent none repeat scroll 0% 0%. 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 background property is a composite property. Separate properties can be used to specify each property, but in many cases it is more convenient to set them in one place using this composite property.

Individual background properties not set by the composite background property are set to their default values. For example, the default value for image is none. Setting background: white is equivalent to setting background: white none repeat scroll 0% 0%. So, in addition to setting the background color to white, setting background: white clears any image, repeat, attachment, or position values previously set.

The background properties render in the object's content and padding; however, borders are set using the border properties.

In Microsoft Internet Explorer 3.0, elements that expose the background property only support the color and image values; the attachment value is only supported by the body, table, and td elements. In block elements, such as p and div, background images and colors appear only behind text in Internet Explorer 3.0; in Internet Explorer 4.0 and later, backgrounds stretch from margin to margin when used with block elements.

Although objects do not inherit the background property, the background image or color of an object's parent appears behind an object if a background is not specified.

For more information about supported colors, see the Color Table.

Examples

The following examples use the background property and the background attribute to set the background values.

This example uses inline event handlers to modify the background-color and background-position attributes of an image. These attributes are specified in an embedded style sheet using the background attribute.

<STYLE>
.style1{background:beige url(sphere.jpg) no-repeat top center}
.style2{background:ivory url(sphere.jpeg) no-repeat bottom right}
</STYLE>
</HEAD> 
<BODY>
<SPAN onmouseover="this.className='style1'"
    onmouseout="this.className='style2'">
. . .  </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 modify the backgroundColor and backgroundPosition properties of an image.

<SPAN onclick="this.style.background='beige url(sphere.jpeg) 
  no-repeat top center'">
. . . </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 World Wide Web Consortium (W3C) Document Object Model (DOM) Level 1 World Wide Web link and is defined in Cascading Style Sheets (CSS), Level 1 (CSS1) World Wide Web link.

Applies To

A, ADDRESS, B, BIG, BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, 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, CSSRuleStyleDeclaration Constructor, CSSStyleDeclaration Constructor, HTMLBodyElement Constructor, HTMLTableCellElement Constructor, HTMLTableElement Constructor
Tags What's this?: Add a tag
Community Content   What is Community Content?
Add new content RSS  Annotations
Images aren't stretched, per se...      John Sudds   |   Edit   |   Show History

The article above speaks of backgrounds that "stretch from margin to margin" inside block level elements. This means that the background covers the entire area of the element, not that the image itself is stretched. Rather, the image is repeated as specified by background-repeat to cover the width and/or height of the element.

CSS2 does not define a way to stretch background images, but you can approximate the effect with two overlapping DIVs. For more information, refer to the Community Content section of background-image.

Tags What's this?: css (x) Add a tag
Flag as ContentBug
Issue with Mouse events and transparent background on Input elements and Textareas      rednael ... Thomas Lee   |   Edit   |   Show History
Please consider the following article:
http://blog.rednael.com/2009/09/01/TrappingMouseEventsOnTransparentInputElementsOrTextareasInIE.aspx

It describes an issue when trying to trap mouse events on transparent Input elements (type=text) and Textarea elements.
Processing
© 2009 Microsoft Corporation. All rights reserved. Terms of Use | Trademarks | Privacy Statement
Page view tracker