CSS3 Background

CSS3 includes several new background properties that provide greater control over background elements.

In this chapter, you will learn about the following background properties:

• background-image
• background-size
• background-origin
• background-clip

You will also learn how to use multiple background images.

Browser Support

The numbers in the table represent the first version of the browser that supports the property.

Numbers followed by -webkit-, -ms-, or -moz- indicate the first version of the browser that supports the prefixed version of the property.

Property
background-image (with multiple backgrounds)	4.0	9.0	3.6	3.1	11.5
background-size	4.0 1.0 -webkit-	9.0	4.0 3.6 -moz-	4.1 3.0 -webkit-	10.5 10.0 -o-
background-origin	1.0	9.0	4.0	3.0	10.5
background-clip	4.0	9.0	4.0	3.0	10.5

 

CSS3 background-image Property

In CSS3, you can use the background-image property to add background images.

Different background images and images are separated by commas, and the image displayed at the top of all images is the first one.

Example

#example1 { 
    background-image: url(img_flwr.gif), url(paper.gif); 
    background-position: right bottom, left top; 
    background-repeat: no-repeat, repeat; 
}

Different properties can be set for different images.
 

#example1 {
    background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

CSS3 background-size Property

The background-size property specifies the size of background images. Prior to CSS3, the size of background images was determined by the actual size of the image.

In CSS3, you can specify the size of background images in different environments. You can specify pixel or percentage sizes.

The size you specify is a percentage size relative to the width and height of the parent element.

Example 1
Reset the background image:

div
{
    background:url(img_flwr.gif);
    background-size:80px 60px;
    background-repeat:no-repeat;
}

Example 2
Stretch the background image to completely fill the content area:

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

CSS3 background-origin Property

The background-origin property specifies the position area of the background image.

Background images can be placed inside the content-box, padding-box, and border-box areas.

OperaSafariChromeFirefoxInternet Explorer

Example
Position the background image in the content-box:

div
{
    background:url(img_flwr.gif);
    background-repeat:no-repeat;
    background-size:100% 100%;
    background-origin:content-box;
}

CSS3 Multiple Background Images

CSS3 allows you to add multiple background images to an element.

OperaSafariChromeFirefoxInternet Explorer
Example
Set two background images in the body element:

body
{ 
    background-image:url(img_flwr.gif),url(img_tree.gif);
}

CSS3 background-clip Property

The background-clip property in CSS3 specifies where to begin drawing the background.

Example

#example1 { 
    border: 10px dotted black; 
    padding: 35px; 
    background: yellow; 
    background-clip: content-box; 
}

Order	Description	CSS
background-clip	Specifies the painting area of the background.	3
background-origin	Specifies the positioning area of the background image.	3
background-size	Specifies the size of the background image.	3