background property

Specifies up to five separate background properties of an object.

CSS Backgrounds and Borders Module Level 3, 3.10CSS 2.1, Section 5.3.7

 

Syntax

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

Property values

Up to five of the following space-delimited values, in any order (see Remarks for more details):

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 ToAll elements
Mediavisual
Inheritedno
Initial Value(see individual properties)

Standards information

Remarks

Note  The above values for the background property can be specified in any order, except when using a gradient as the image value. In this case, you must specify the gradient first.

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.

As of Internet Explorer for Windows Phone 8.1 Update, Internet Explorer for Windows Phone supports "-webkit-background" as an alias for this property.

Examples

The following example shows how to create three div objects with the same width and height but different background settings.


div {
   width: 150px;
   height: 150px;
   float: left;
   margin-right: 10px;
}
.circle {
   background: aqua url(circle.png) no-repeat 90% 50%;
   /* This is equivalent to the following individual settings:
   background-color: aqua;
   background-image: url(circle.png);
   background-repeat: no-repeat;
   background-position: 90% 50%;*/
}
.square {
   background: aquamarine url(square.png) no-repeat scroll left bottom;
   /* This is equivalent to the following individual settings:
   background-color: aquamarine;
   background-image: url(square.png);
   background-repeat: no-repeat;
   background-attachment: scroll;
   background-position: left bottom;*/
}
.triangle {
   background: bisque url(triangle.png) no-repeat local 50px 50px;
   /* This is equivalent to the following individual settings:
   background-color: bisque;
   background-image: url(triangle.png);
   background-repeat: no-repeat;
   background-attachment: local;
   background-position: 50px 50px;*/
}


<body>
   <div class="circle"></div>
   <div class="square"></div>
   <div class="triangle"></div>
</body>

The following image shows the result:

An image showing three div objects with the same width and height but different background settings.

See also

CSSStyleDeclaration
currentStyle
defaults
runtimeStyle
style

 

 

Show:
© 2014 Microsoft