CSS3 Background
With CSS3, you can apply multiple backgrounds to elements.
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;
}
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
.