17 out of 32 rated this helpful - Rate this topic

background property

Specifies up to five separate background properties of an object.

CSS Backgrounds and Borders Module Level 3, 3.10

Syntax

background: [ <color> || <image> || <repeat> || <attachment> || <position> ]

Property values

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	(see individual properties)

Standards information

CSS Backgrounds and Borders Module Level 3, 3.10
CSS 2.1, Section 5.3.7
Document Object Model (DOM) Level 1 Specification, Section 2.5.5

Remarks

The background property is a shorthand 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 shorthand property.

Individual background properties not set by the composite background property are set to their default values. For instance, 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.

Starting in Windows Internet Explorer 9, the background of a box can have multiple layers. The number of layers is determined by the number of comma-separated values in the background-image property. Each of the images is sized, positioned, and tiled according to the corresponding value in the other background properties (background-attachment, background-clip, background-origin, background-position, background-repeat, and background-size). The first image in the list is the layer closest to the user, the next one is painted behind the first, and so on.

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

HTML


<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>background Property</title>
<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 onmouseout="this.className='style2'" onmouseover="this.className='style1'">
. . . </span>

</body>

</html>

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>

Community Additions

ADD