How to make the background image stretch and fill in css to avoid repeated display

How to make the background image stretch and fill, this question sounds simple. 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 length and width values ​​of this background cannot be modified before CSS2.1.
So the actual result can only be displayed repeatedly, so the attributes repeat, repeat-x, repeat-y, and no-repeat appear. It is used to control the display of background images. So there are two types of background pictures:

1. A whole large picture, the size of which exactly matches the size of the area
2. A very small bar picture, After repeating, a very regular large picture background is formed.

But after css3 appeared, this situation was improved. The background-size property can make our previous wishes come true.
And this property can be used on firefox, chrome, and ie9.

The specific usage method is as follows:
Background image size (numeric representation):

The code is as follows:

#background-size{ 
background-size:200px 100px; 
}

Background image size (percentage) Representation):

The code is as follows:

#background-size2{ 
background-size:30% 60%; 
}

Background image size (expand the image proportionally to fill the element, that is, the cover value):

The code is as follows:

#background-size3{ 
background-size:cover; 
}

Background image size (reducing the image proportionally to fit the size of the element, that is, the contain value):

The code is as follows:

#background-size4{ 
background-size:contain; 
}

Background image size (filling the element with the image's own size , that is, auto value):

The code is as follows:

#background-size5{ 
background-size:auto; 
}

The above is the detailed content of How to make the background image stretch and fill in css to avoid repeated display. For more information, please follow other related articles on the PHP Chinese website!