CSS3 Tutorial-Background

Front-end development of the program staff, every day to explain to you some of the CSS3 tutorial knowledge is how happy one thing Ah, CSS3 contains a number of new background properties, they provide more powerful control of the background.

In this article, you will learn the following two background properties:

1, Background-size;

2, Background-origin.

You'll also learn how to use multiple background images.

Browser support

Let's start by understanding CSS3 Background-size Properties:

The Background-size property specifies the size of the background picture.

Before CSS3, the size of the background image is determined by the actual size of the picture. In CSS3, you can specify the size of the background image, which allows us to reuse the background image in different environments.

You can specify dimensions in pixels or percentages. If the dimension is specified as a percentage, the size is relative to the width and height of the parent element.

Example 1:

Adjust the size of the background picture:

Div{background:url (bg_flower.gif);-moz-background-size:63px 100px;/* old version of Firefox */background-size:63px 100px; Background-repeat:no-repeat;}

Example 2:

Stretch the background image so that it finishes filling the content area:

Div{background:url (bg_flower.gif);-moz-background-size:40% 100%;/* old version of Firefox */background-size:40% 100%; Background-repeat:no-repeat;}

Look again at the CSS3 Background-origin property:

The Background-origin property specifies the location area of the background image.

The background image can be placed in the Content-box, Padding-box, or border-box areas.

Instance:

To position the background image in Content-box:

Div{background:url (bg_flower.gif); background-repeat:no-repeat;background-size:100% 100%;- Webkit-background-origin:content-box; /* Safari */background-origin:content-box;}

CSS3 Multiple background images:

CSS3 allows you to use multiple background images for an element.

Instance:

Set two background images for the BODY element:

Body{background-image:url (bg_flower.gif), url (bg_flower_2.gif);}

New Background properties:

The above is CSS3 Tutorial-background content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!

