CSS Reference Manual

CSS @rules (RULES)

Complete list of CSS attributes

CSS background-attachment property CSS3 backface-visibility property

CSS background property usage and examples

The CSS background property is a shorthand property used to set various background properties, that is, a shorthand shorthand property, and background-image,background-position,background-size,background-repeat,background-attachment,background-origin,background-clipAndbackground-color These individual property declarations.

The following table summarizes the usage context and version history of this attribute.

Default value:	View all property values
Applies to:	All elements
Inheritance:	None
Animatable:	Yes, because some properties of shorthand can be animated.Please refer to Animation properties.
Version:	CSS 1,2,3
JavaScript syntax:	object　　　object.style.background="red url(smiley.gif) top left no-repeat"

Syntax of background

The syntax of this attribute is as follows:

background:　[　image　position/size repeat attachment origin clip color] | initial | inherit

Note:If any of the listed properties are missing or omitted, the default value of the property (if any) will be inserted. For more details, see each property.

The following example demonstrates how to use the background property.

Example

body {background: #ffff00 url("smiley.png") no-repeat fixed center;}

Test see‹/›

In CSS3In, you can also add multiple backgrounds to a single element. The backgrounds overlap each other along the z-axis.

Example

.box {
　　　　width:　100%;
　　　　height:　500px;
　　　　background: url("images/birds.png") no-repeat center,url("images/clouds.png") no-repeat center,lightblue;
}

Test see‹/›

Property values

The following table describes the values of this property.

Value	Description
background-attachment	Specify whether the background scrolls with the document or remains fixed in the viewing area.
background-color	Set the background color of the element.
background-clip	Specify the area where the background is drawn.
background-image	Set one or more background images for an element.
background-origin	Specify the positioning area of the background image.
background-position	Set the initial position of the background image.
background-repeat	Specify how the background image is tiled after specifying its size and position.
background-size	Specify the size of the background image.
initial	Set this property to its default value.
inherit	If specified, the associated element uses the calculated value of its parent element's background property.

Browser compatibility

Browser compatibility of the background property, all mainstream browsers support this property.

	Firefox 1+ Google Chrome1+ Internet Explorer 4+ Apple Safari 1+ Opera 3.5+

For further reading

Please refer to the following tutorials:CSS background,CSS3Background.

CSS background-attachment property CSS3 backface-visibility property