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

This article mainly introduces css how to change the size of the background picture, the article is very detailed, has a certain reference value, interested friends must read it!

In css, you can use the background-size property to change the size of the background picture, which is used to specify the size of the background picture. You can change the size of the picture by setting the property value to a length value or percentage, or by setting the property value to the cover and contain keywords to scale the picture.

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.

The background-size property specifies the size of the background picture. Syntax format:

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.

The background-size property can be used to set the size of a picture by a length value or percentage, or to scale a picture through cover and contain.

Example:

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

Original background picture size

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

Modify the size of the background image through CSS. The width of the picture is 200px, and the height is 112px.

Effect picture:

The above is all the contents of the article "how to change the size of background pictures in css". Thank you for reading! Hope to share the content to help you, more related knowledge, 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.