Shulou(Shulou.com)06/01 Report--

In this article Xiaobian for you to introduce in detail "css how to make the background picture stretch fill to avoid repeated display", the content is detailed, the steps are clear, the details are handled properly, I hope this "css how to make the background picture stretch fill to avoid repeated display" article can help you solve doubts, following the editor's ideas slowly in-depth, together to learn new knowledge.

Set a background in a body,div,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 such as repeat,repeat-x,repeat-y,no-repeat appear. It is used to control the display of the background picture. Therefore, there are two types of background images:

1. It's a whole picture, and the size matches the size of the area.

two。 A very small bar chart, after passing through repeat, forms a very regular large image background.

But with the advent of css3, the situation has improved. The background-size attribute can make our previous hopes come true.

And this attribute can be used on both firefox,chrome and ie9.

The specific usage is as follows:

Background image size (numerical representation):

Copy the code

The code is as follows:

# background-size {

Background-size:200px 100px

}

Background image size (percentage representation):

Copy the code

The code is as follows:

# background-size2 {

Background-size:30% 60%

}

Background image size (proportional expansion of the picture to fill the element, that is, the cover value):

Copy the code

The code is as follows:

# background-size3 {

Background-size:cover

}

Background image size (proportional reduction of the picture to fit the size of the element, that is, containment value):

Copy the code

The code is as follows:

# background-size4 {

Background-size:contain

}

Background image size (fill the element with the size of the picture itself, that is, autovalue):

Copy the code

The code is as follows:

# background-size5 {

Background-size:auto

}

Read here, this article "css how to make background pictures stretch and fill to avoid repeated display" article has been introduced, want to master the knowledge of this article still need to practice and use in order to understand, if you want to know more related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.