background property
[This documentation is preliminary and is subject to change.]
Sets or retrieves up to five separate background properties of the object.
 |
Syntax
background: [
<color>
|| image || repeat || attachment || position ]
Property values
A variable of type String 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 background-color property.
image-
Any of the range of image values available to the background-image property.
repeat-
Any of the range of repeat values available to the background-repeat property.
attachment-
Any of the range of attachment values available to the background-attachment property.
position-
Any of the range of position values available to the background-position property.
CSS information
| Applies To | All elements |
|---|---|
| Media | visual |
| Inherited | no |
| Initial Value |
Standards information
- CSS 2.1, Section 5.3.7
- Document Object Model (DOM) Level 1 Specification, Section 2.5.5
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.
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.
Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/background_h.htm
<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 example uses inline scripting to modify the background-color and background-position properties of an image.
Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/background_s.htm
<SPAN onclick="this.style.background='beige url(sphere.jpeg) no-repeat top center'"> . . . </SPAN>
Build date: 3/14/2012
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.
- 9/1/2009
- rednael
- 9/22/2009
- Thomas Lee
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.
- 8/22/2007
- John Sudds [Microsoft]
