CSS background settings,

One small step a day, one big step in a year.

The first blog Park article, the main record of their own learning a process.

CSS3 background

CSS3 contains a number of new background properties that provide more powerful control over the background.

• Background-size
• Background-origin

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

Browser support

Internet Explorer + +, Firefox, Chrome, Safari, and Opera support new background properties

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

/ * old version of Firefox */background-size:63px 100px;background-repeat:no-repeat;}

BACKGROUND-SIZE:63PX 100px; Indicates that the left and right widths are 63 pixels and up and down is 100 pixels.

Example 2

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

/ * old version of Firefox */background-size:40% 100%;background-repeat:no-repeat;}