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

This article mainly explains "how to change the size of the background picture in css". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to change the size of the background picture in css".

In css, you can change the size of the background image by setting the background-size property style for the background image, which is used to specify the size of the background image. The syntax "background-size: width value, height value;".

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

In css, you can change the size of the background image by setting the background-size property style for the background image.

The background-size property specifies the size of the background picture.

Syntax: background-size: length | percentage | cover | contain

Length sets the height and width of the background picture. The first value sets the width and the second value sets the height. If only one value is given, the second one is set to auto (automatic)

Percentage calculates the percentage of the positioning area relative to the background. 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 now maintains the aspect ratio of the image and scales the image 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:

Div {width: 400px; height: 224px;} .box1 {background:url (img/2.jpg) no-repeat } .box2 {background:url (img/2.jpg) no-repeat; background-size: 200px 160px;}

Original picture size

The width of the picture itself is 400px and the height is 224px.

The background image modified by CSS background-size

Thank you for your reading, the above is the content of "how to change the size of the background picture in css". After the study of this article, I believe you have a deeper understanding of how to change the size of the background picture in css, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.