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

This article mainly introduces "how the background picture in css becomes smaller". In the daily operation, I believe that many people have doubts about how the background picture in css becomes smaller. The editor consulted all kinds of materials and sorted out a simple and easy-to-use operation method. I hope it will be helpful to answer the question of "how the background picture in css becomes smaller". Next, please follow the editor to study!

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

In css, you can use the background-size property to make the background image smaller.

The background-size property is used to specify the background picture size. The syntax format is as follows:

Background-size: length | percentage | cover | contain; value describes how length sets the height and width of the background image. The first value sets the width and the second value sets the height. If only one value is given, the second is set to auto (automatic) percentage will calculate the percentage relative to the background positioning area. The first value sets the width and the second value sets the height. If only one value is given, the second is set to "auto" cover. At this point, the aspect ratio of the image is maintained and the image is scaled to the minimum size that will completely cover the background positioning area. Contain now maintains the aspect ratio of the image and scales the image to the maximum size that will fit the background positioning area.

Example:

Add a background picture to the div element

Div {width: 100%; height: 1000px; background: url (img/1.jpg) no-repeat;}

Effect picture:

The size of the background image can be controlled by using the background-size property below

Div {width: 100%; height: 1000px; background: url (img/1.jpg) no-repeat; background-size:200px 250px;}

Effect picture:

At this point, the study of "how to reduce the background picture in css" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.