Summary

The background CSS property is a shorthand for setting the individual background values in a single place in the style sheet. background can be used to set the values for one or more of: background-color , background-image , background-position , background-repeat , background-size , and background-attachment .

The background shorthand property assigns explicit given values and sets missing properties to their initial values.

Syntax

background:  [<bg-layer>, ]* <final-bg-layer>

where:

<bg-layer>

[ <background-image> || <background-repeat> || <background-attachment> || <background-position> ]
|  inherit

<final-bg-layer>

[ <background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position> ]
|  inherit

Values

One or more of the following, in any order:

<background-color>

See background-color

<background-image>

See background-image

<background-repeat>

See background-repeat

<background-attachment>

See background-attachment

<background-position>

See background-position

Examples

View Live Examples

body { background: red; }

.topbanner { background: url("topbanner.png") #00D repeat-y fixed; }

Specifications

Browser compatibility

See also

• background , background-attachment , background-clip , background-color , background-image , background-origin , background-position , background-repeat , background-size
• -moz-background-size , -moz-background-inline-policy
• Using gradients
• Multiple backgrounds