YouTip

CSS3 Background

CSS3 contains 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 specify the first browser version that supports the property.

The numbers in front of -webkit-, -ms-, or -moz- specify the first browser version that supports the prefixed property.

CSS3 background-image Property

In CSS3, background images can be added through the background-image property.

Different background images are separated by commas, and the first image displayed at the top 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;
}

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

In CSS3, you can specify the background image size, allowing us to specify the size of the background image in different environments. You can specify pixel or percentage sizes.

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

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

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

Example

Position the background image in 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 in the body element:

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

CSS3 background-clip Property

In CSS3, the background-clip background clipping property draws from a specified position.

Example

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

New Background Properties