Name

background

Values:

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

Initial value:

Refer to individual properties.

Applies to:

All elements.

Inherited:

No.

Percentages:

Values are allowed for <background-position>.

Computed value:

See individual properties.

Description:

A shorthand way of expressing the various background properties using a single rule. Use of this property is encouraged over the other background properties because it is more widely supported and doesn’t take as long to type. However, using it will set all of the allowed values (e.g., the repeat, position, and so on) to their defaults if the values are not explicitly declared. Thus, the following two rules will have the same appearance:

   background: yellow;
   background: yellow none top left repeat;

Furthermore, these defaults can override previous declarations made with more specific background properties. For example, given the following rules:

   h1 {background-repeat: repeat-x;}
   h1, h2 {background: yellow url(headback.gif);}

the repeat value for both h1 and h2 elements will be set to the default of repeat, overriding the previously declared value of repeat-x.

Examples:

body {background: white url(bg41.gif) fixed center repeat-x;}
p {background: url(http://www.pix.org/stone.png) #555;}
pre {background: yellow;}

Supported by:

Firefox, Internet Explorer, Opera, Safari.

Note:

There is limited support for background-attachment in Explorer previous to IE7. ...

Get CSS Pocket Reference, 3rd Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.