CSS background image stretched to 100% full screen display how to set

Now the use of CSS for many users is also more important, the use of the picture can be very good stretch, without leaving traces, this article to share is about the CSS background image stretching to 100% full screen display how to set up, there is a need for friends to refer to.

Now the use of CSS for many users is also more important, the use of the picture can be very good to stretch, without leaving traces. So when we use CSS, the background image stretches to 100% full screen display what should be done? What is the specific code?

How to use CSS background image to stretch to 100% full screen display? The question sounds simple enough to sound. But I'm sorry to tell you. It's not as simple as we think.

For example, set a background in a container (Body,p,span). The long-width value of this background cannot be modified until css2.1.

So the actual result is only repeated display, so there are repeat,repeat-x,repeat-y,no-repeat these properties. It is used to control the display of the background image. So there are 2 categories that are commonly used as background images:

1. It's a whole big picture, size and area exactly match

2. A very small bar chart, through repeat, forms a very regular large picture background.

But after the advent of CSS3, the situation was improved. The Background-size property can make our previous hopes come true.

And this property can be used on firefox,chrome, as well as IE9.
Here's how to use it:
Background image size (numeric representation):

The code is as follows:

#background-size{

background-size:200px 100px;

}

Background map size (percent representation):

The code is as follows:

#background-size2{

background-size:30% 60%;

}

The size of the background map (equal to the image to fill the element, i.e. the cover value):

The code is as follows:

#background-size3{

Background-size:cover;

}

The size of the background map (equal to the size of the element, i.e. the contain value):

The code is as follows:

#background-siz

e4{

Background-size:contain;

}

The size of the background map, which fills the element with the size of the picture itself, the auto value:

The code is as follows:

#background-size5{

Background-size:auto;

}

Related recommendations:

How large is the size of a repeating tile CSS background image? _html/css_web-itnose

CSS background image to leave a lot of transparency will affect the page? _html/css_web-itnose

CSS background image loading finished first after rendering problems, I hope you see _html/css_web-itnose