CSS3 Background

CSS3 Background

CSS3 includes several new background properties, providing 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 specify the first browser version that fully supports the property.

Numbers followed by -webkit-, -ms-, or -moz- specify the first version that supported the prefixed property.

CSS3 background-image Property

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

Different background images and images are separated by commas, with the topmost image being the first one displayed.

Example

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

You can set multiple different properties for different images.

Example

#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 the background images. Before CSS3, the size of the background image was determined by the actual size of the image.

In CSS3, you can specify the size of the background image, allowing us to resize the background image in different environments. You can specify the size in pixels or as a percentage.

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

Example 1

Resize 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 positioning area of the background images.

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

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. |

Example

Set two background images on the body element:

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

CSS3 background-clip Property

In CSS3, the background-clip property specifies the painting area of the background.

Example

#example1 { 
    border: 10px dotted black; 
    padding: 35px; 
    background: yellow; 
}

background-clip: content-box;
}

New Background Properties