HTML Dog
Skip to navigation

CSS Property: background

Background color and image characteristics.

A shorthand property that combines:

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:

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.

background: url("bg.png") top right no-repeat #ccc

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;

A repeating background image, a single-instance background image, and combining them together in the same box.

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) */
}