CSS Property: background

A shorthand property that combines:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position
• background-clip
• background-origin
• background-size

Possible Values

A list of background characteristic sub-values. Possible sub-values follow the same rules as possible values for corresponding aforementioned properties. The sub-value list follows a specific format:

[image] [position] / [size] [repeat] [attachment] [origin] [clip] [color]

Full example: url("bg.jpg") 20% 0% / contain repeat-y fixed content-box padding-box #fff

Not all values are required:

• If only one of background-clip or background-origin portions is included, that value will apply to both clip and origin characteristics.
• Any other excluded values will default to their initial value.
• The “/” is only used to separate position and size portions. If background-size is excluded, “/” is not required.

Basic example: url("bg.jpg") 20% 0% repeat-y fixed #fff

Minimal example: url("bg.jpg") #fff

inherit, initial, or unset can also be used on their lonesome.

Multiple backgrounds

Multiple backgrounds can be applied by separating each background value list with a comma. The first background will be applied on top, “nearest” to the user. Subsequent images will be applied underneath the background that comes before it.

The background-color portion should only be applied to the final background specified.

Example: url("upperImage.png") 0 0 no-repeat, url("lowerImage.png") right repeat-y #fff;

Example

.shorthand1 { url("bg.jpg") 20% 0% / 99px 33px repeat-y fixed content-box padding-box #fff; }
/* ...is the equivalent of... */
.longhand1 {
    background-image: url("bg.jpg");
    background-position: 20% 0%;
    background-size: 99px 33px;
    background-repeat: repeat-y;
    background-attachment: fixed;
    background-origin: content-box;
    background-clip: padding-box;
    background-color: #fff;
}

.shorthand2 { background: fuchsia; }
/* ...is the equivalent of... */
.longhand2 {
    background-color: fuchsia;
    background-image: initial; /* (none) */
    background-position: initial; /* (0% 0%) */
    background-size: initial; /* (auto) */
    background-repeat: initial; /* (repeat) */
    background-attachment: initial; /* (scroll) */
    background-origin: initial; /* (padding-box) */
    background-clip: initial; /* (border-box) */
}