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

This article mainly introduces how to use css to stretch and fill the background image to avoid repeated display. It has a certain reference value. Now I share it with you. Friends in need can refer to it.

But css3 appears In the future, this duplicate display situation will be improved. The background-size attribute can make our previous hope of stretching and filling the background image come true. The specific usage method is as follows. Interested friends can refer to it. I hope it will be helpful to everyone. 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 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 the emergence of CSS3, this situation has been 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):

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

Background image size (percentage representation):

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

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

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

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

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

Background image size (fill the element with the size of the image itself, that is, auto value):

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

The above is the entire content of this article, I hope it will be helpful to everyone's learning, please pay attention to PHP for more related content Chinese website!

Related recommendations:

About the ellipses that appear when CSS multi-line text overflows

About the use of the greater than symbol in CSS styles and Processing inheritance methods in Css

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