This page is Ready to Use

Notice: The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.

background

Summary

This background property is a shorthand property for setting the color, position, size, repeat, clip, origin, attachment, and image of the element.

The background- properties provide fundamental styles to an element, such as color, image, and position. CSS3 adds more properties for handling backgrounds, including properties that improve the mobile web experience. Many CSS background properties can be set, at the same time, with this background property.

Overview table

Initial value
[[Initial value::see individual properties: * background-color * background-position * background-size * background-repeat * background-attachment * background-clip * background-origin * background-image]]
Applies to
all elements
Inherited
No
Media
visual
Computed value
see individual properties
Animatable
No
CSS Object Model Property
background
Percentages
see individual properties

Syntax

  • background: <attachment>
  • background: <bg-image>
  • background: <box>{1,2}
  • background: <color>
  • background: <position> [ / <bg-size> ]?
  • background: <repeat-style>

Values

<bg-image>
Any of the values available to background-image property. The default value is none.
<position> [ / <bg-size> ]?
Any of the values available to background-position property. Otherwise, it is set to its initial value.
<repeat-style>
Any of the values available to background-repeat property. The default value is repeat.
<attachment>
Any of the values available to background-attachment property. The default value is scroll.
<box>{1,2}
If one <box> value is present then it sets both background-origin and background-clip to that value. If two values are present, then the first sets background-origin and the second background-clip.

For background-clip, valid values are those available to background-clip property. The default value is border-box. For background-origin, valid values are those available to background-origin property. The default value is padding-box.

<color>
Any of the values available to background-color property. The default value is transparent.

Examples

The background property is set to the color #f06 on the p element.

p {
    background: #f06;
}

View live example

Only one background property is set on the body. Many individual properties have been specified for the p element, including a background image that only shows up on the p element.

body {
    background: #90ee90;
    font-family: 'Bitter';

}
p { background: url(http://www.webplatform.org/logo/wplogo_transparent_xlg.png)
                40% / 20em
                #ffffe0
                round
                fixed
                border-box;
}

View live example

Usage

 The background property is a shorthand property that can set almost all of the background- properties. The specification has examples of how to use the shorthand property and what that usage translates to.

Notes

The background of the root element becomes the background of the canvas and extends to cover the entire canvas, but only for that element alone. For an example, see [1].

Related specifications

CSS Level 3
Candidate Recommendation
CSS Level 2 (Revision 1)
Recommendation

See also

Related articles

CSS Layout

Background

Other articles

External resources