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

This article is about how to use the background-size attribute in css. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

CSSbackground-size attribute

Function: specify the size of the background picture.

Note: before CSS3, the size of the background picture was determined by the actual size of the picture. In CSS3, you can specify the size of the background image, which allows us to reuse the background image in different environments.

Syntax:

Background-size:length | percentage | cover | contain

Value description

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 set, the second value is set to "auto".

Percentage

Sets the width and height of the background image as a percentage of the parent element.

The first value sets the width and the second value sets the height.

If only one value is set, the second value is set to "auto".

Cover

Expand the background image to large enough so that the background image completely covers the background area.

Some parts of the background image may not be displayed in the background positioning area.

Contain expands the image to its maximum size so that its width and height fully fit the content area.

Example of using CSSbackground-size property

Body

{

Background:url (https://img.php.cn/upload/article/000/000/024/5c513adf97e86533.jpg);

Background-size:63px100px

-the old version of Firefox*/ of moz-background-size:63px100px;/*

Background-repeat:no-repeat

Padding-top:80px

}

Above is a scaled-down background picture.

Original picture:

Thank you for reading! This is the end of this article on "how to use the background-size attribute in css". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

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.