CSS3 Background Tutorial
Some of the most interesting web designs you see online are composites made up of multiple images carefully overlaid one on top the other to get the right effect. Designers have to first create these images with software like Photoshop and carefully insert each piece into elaborately set up <div> elements to create the correct overall feel. With the new background properties in CSS3 many such designs will become a lot easier to put together.
Background Size
The new CSS3 background-size property allows you to adjust the size of the background using either a fixed or relative size. Let us look at an example. We will use an image 200px x 200px as the background image for a box with dimensions 300px x 300px. We will do three versions with this image as the background. In the first one we will not make any changes to the background size. In the second one we will use relative size to have the image fill the element’s background by setting the background-size property to 100% 100%. In the third version we will make the image smaller by setting the size the fixed size 100px 100px.
<html>
<head>
<style type= "text/css" >
#box1 {
height:300px;
width:300px;
background:#f0f0f0;
background-image:url("snowdrop.png");
background-repeat:no-repeat;
border:3px solid black;
}
#box2 {
height:300px;
width:300px;
background:#f0f0f0;
background-image:url("snowdrop.png");
background-size:100% 100%;
background-repeat:no-repeat;
border:3px solid black;
}
#box3 {
height:300px;
width:300px;
background:#f0f0f0;
background-image:url("snowdrop.png");
background-size:100px 100px;
background-repeat:no-repeat;
border:3px solid black;
}
</style>
</head>
<body>
<div id= "box1"> </div>
<div id= "box2"> </div>
<div id= "box3"> </div>
</body>
</html>
The image below shows how this will display in the browser.
Multiple Background Images
With CSS3 you can include multiple images by simply separating the image urls with commas. Here is an example.
<style>
#box1 {background-image:url("snowdrop.png"), url("aster.png"); }
</style>
The image below shows what this looks like in the browser. As you can see the first image listed, in this case “snowdrop.png” is on top and the second image listed, “aster.png” is displayed beneath.
Background Origin
Another new property in CSS3 is the background-origin property. To understand how to use this property, you have to review the standard CSS box-model. All elements have a box structure, which includes the margin, border, padding and content boxes. See image below.
The background-origin property works with background-image property and allows you to place the image in the border-box, padding-box or the content-box. Let us look at an example with three boxes. In this example we will set the border value to 30px and set its style to double. We will also use different background colors for the box and the webpage background. This way it will be easier to discern the differences between placing the image in different boxes.
<style>
body {
background: #fbec5d;
}
#box1 {
height:300px;
width:300px;
margin:20px;
padding:15px;
background:#ffffff;
background-image:url("aster.png");
background-repeat:no-repeat;
background-origin:border-box;
border:30px double red;
}
#box2 {
height:300px;
width:300px;
margin:20px;
padding:15px;
background:#ffffff;
background-image:url("aster.png");
background-repeat:no-repeat;
background-origin:padding-box;
border:30px double red;
}
#box3 {
height:300px;
width:300px;
margin:20px;
padding:15px;
background:#ffffff;
background-image:url("aster.png");
background-repeat:no-repeat;
background-origin:content-box;
border:30px double red;
}
</style>
Here is how the style will display in the browser. Note how the position of the background image shifts according to the value of the background-origin property.
Background Clip
The background-clip property allows you do additional background styling using the box model. This property clips all aspects of an element’s background, like color and image. The background-clip property has the same three values as the background-origin property – border-box, padding-box and content-box. Let us look at an example to see how this property works. We will style three boxes with red 30px borders with a double style. We will apply a different background-clip value to each of the boxes.
<style>
body {
background: #fbec5d;
}
#box1 {
height:300px;
width:300px;
margin:20px;
padding:15px;
background:#ffffff;
background-clip:border-box;
border:30px double red;
}
#box2 {
height:300px;
width:300px;
margin:20px;
padding:15px;
background:#ffffff;
background-clip:padding-box;
border:30px double red;
}
#box3 {
height:300px;
width:300px;
margin:20px;
padding:15px;
background:#ffffff;
background-clip:content-box;
border:30px double red;
}
</style>
As you can see in the image below, the background-clip property removes the background color for all the element’s area except for the specified box.
