CSS3 Backgrounds

In this chapter we will learn about several new background property introduced in css3, like background-size, background-origin and using multiple background images. CSS3 background properties works in all latest browsers including IE9+.

The background-size Property in CSS3

Now in CSS3 you can define the background image size. Before this the background image always shows the default size of the image. But now you can specify height and width of the background image.

.myBG {
background:url(myimage.gif);
background-size:50px 50px; /* Width and Height*/
background-repeat:no-repeat;
} 

You can also specify the size in percentage. If you want to stretch the background full width of the div then you can assign the width and height 100%.

.myBG {
background:url(myimage.gif);
background-size:100% 100%; 
background-repeat:no-repeat;
} 

The background-origin Property in CSS3

To specify the staring position of the background image the background-origin property is used. Please note this will not work for background color. Parameters passed for background-origin property are content-box, padding-box and border-box.

.myBG {
background:url(myimage.gif);
background-size:50px 50px; /* Width and Height*/
background-origin:content-box;
} 

Multiple Background Images in CSS3

You can use multiple background images for an element in CSS3.

.myBG {
background:url(myimage1.gif),url(myimage2.gif) ;
}