CSS background property

The background property can be used to set all the background settings in one declaration (background color, background image, background repetition, background attachment, background position). The other background properties set one setting at a time, while this property sets a bunch of settings at once (one or more, as many as you need).

This property is NOT inherited

Possible values

Since this property can be used to set any of the background settings, the same possible values apply that you would set for any of the other background properties depending on what you're setting. For example, if you used the background property to set background attachment, you would use either the word "fixed" or "scroll" the same way you would with the background-attachment property.

Example

body {background: #b0c3d5 url(/images/apple.jpg) no-repeat fixed top right;} div {background: url(/images/bricks.jpg) repeat;} p {background: #e4e4e4;}

Output:

All the background settings in ONE declaration!

Just some of the background settings (still, just one declaration used to set them)

Just one background setting for this paragraph

Javascript

You can access this property with Javascript:

element.style.background = "#e5e5e5 url(/images/someImage.jpg) no-repeat fixed center;";

Other background properties

background-attachment
background-color
background-image
background-position
background-repeat

CSS background examples

More CSS examples