CSS3 Background

Using CSS3 Backgrounds

The CSS3 provides several new properties to manipulate the background of an element like background clipping, multiple backgrounds, and the option to adjust the background size.

The following section will describe you all the new background features of CSS3, for other background related properties please check out the CSS background tutorial.

CSS3 background-size Property

The background-size property can be used to specify the size of the background images.  Prior to CSS3, the size of the background images was determined by the actual size of the images. The background image size can be specified using the pixels or percentage values as well as the keywords auto, contain, and cover. Negative values are not allowed.

Example

.box {
    width: 250px;
    height: 150px;
    background: url("images/sky.jpg") no-repeat;
    background-size: contain;
    border: 6px solid #333;
}

Tip: The background-size property is typically used to create full size background images that scale according to the size of viewport or witdh of the browser.

---

CSS3 background-clip Property

The background-clip property can be used to specify whether an element’s background extends into the border or not. The background-clip property can take the three values: border-box, padding-box, content-box.

Example

.box {
    width: 250px;
    height: 150px;
    padding: 10px;
    border: 6px dashed #333;
    background: orange;
    background-clip: content-box;
}

See the tutorial on CSS box model to learn more about element’s boxes.

---

CSS3 background-origin Property

The background-origin property can be used to specify the positioning area of the background images. It can take the same values as background-clip property: border-box, padding-box, content-box.

Example

.box {
    width: 250px;
    height: 150px;
    padding: 10px;
    border: 6px dashed #333;
    background: url("images/sky.jpg") no-repeat;
    background-size: contain;
    background-origin: content-box;
}

Note: The background-origin property is ignored if the value of background-attachment property is specified as 'fixed'.

---

CSS3 Multiple Backgrounds

CSS3 gives you ability to add multiple backgrounds to a single element. The backgrounds are layered on the top of one another. The number of layers is determined by the number of comma-separated values in the background-image or background shorthand property.

Example

.box {
    width: 100%;
    height: 500px;
    background: url("images/birds.png") no-repeat center,  url("images/clouds.png")  no-repeat center, lightblue;
}

The first value in the comma-separated list of backgrounds i.e. the background-image ‘birds.png’ will appear on the top and the last value i.e. the ‘lightblue’ color will appear at the bottom. Only the last background can include a background-color.