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 (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 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

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.

The background of an element 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.

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.

CSS


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;*/
}

HTML


<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.