CSS Reference Manual

CSS @rules (RULES)

Complete List of CSS Properties

CSS background-attachment attribute CSS3 backface-visibility attribute

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 usage

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

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‹/›

Attribute value

The following table describes the values of this attribute.

Value	Description
background-attachment	Specify whether the background is scrolled with the document or remains fixed in the viewing area.
background-color	Set the background color of the element.
background-clip	Specify the area to be drawn for the background.
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 computed value of its parent element's background attribute.

Browser compatibility

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

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