background-size
Set the size of the background image, displayed as a length value or percentage. You can also scale the image through cover and contain.
Detailed explanation of the usage of background-size attribute:
Background-size attribute has two parameters (cover and contain are not included here), The parameter value can be in exact numerical form, percentage form, or the default value auto, for example:
background-size:200px 100px;
background-size:50% 50%;
background-size:auto;
The following parameters for the Background-size attribute Let’s give a brief introduction:
If there is only one parameter, then this value is used to specify the width of the background image. At this time, the height value of the background image is scaled proportionally to the width.
If two parameters are provided, the first parameter is used to specify the width of the background image, and the second parameter is used to specify the height of the background image.
The code example is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
ul li{
width:450px;
height:300px;
border:5px solid green;
list-style:none;
}
.test{
background-image:url(http://cdn.duitang.com/uploads/item/201309/22/20130922202150_ntvAB.thumb.600_0.jpeg);
background-size:200px 100px;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<ul>
<li class="test"></li>
</ul>
</body>
</html>The Background-size attribute has two parameters. The first parameter specifies the width of the background image as 200px, and the second parameter specifies the height of the background image as 100px.
Look at another code example:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
ul li{
width:450px;
height:300px;
border:5px solid green;
list-style:none;
margin-top:10px;
}
.first{
background-image:url(http://cdn.duitang.com/uploads/item/201309/22/20130922202150_ntvAB.thumb.600_0.jpeg);
background-size:200px;
background-repeat:no-repeat;
}
.second{
background-image:url(http://cdn.duitang.com/uploads/item/201309/22/20130922202150_ntvAB.thumb.600_0.jpeg);
background-size:600px;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<ul>
<li class="first"></li>
<li class="second"></li>
</ul>
</body>
</html>In the above code, the Background-size attribute specifies a parameter, then this parameter is used to specify the width of the background image, and the height of the background image is based on the width value, etc. Proportional scaling, if the size of the background image exceeds the container, it will be cropped.
If the background-size attribute value is auto, the background image will be displayed according to its original size. There is no need for an example demonstration here.
Let’s introduce the cover and contain attribute values of this attribute.
1.cover attribute:
After setting the attribute value to cover, the background image will be scaled to completely cover the container. The background image may exceed the container, but the excess part will be Cut.
cover also means covering in English. Saying this will help everyone’s memory and understanding.
Code examples are as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
ul li{
width:450px;
height:300px;
border:5px solid green;
list-style:none;
margin-top:10px;
}
.test{
background-image:url(http://cdn.duitang.com/uploads/item/201309/22/20130922202150_ntvAB.thumb.600_0.jpeg);
background-size:cover;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<ul>
<li class="test"></li>
</ul>
</body>
</html>In the above code, the background image can completely cover the container to a minimum extent. If the background image has a different length-to-width ratio than the container, it will inevitably appear in the horizontal or vertical direction. If it exceeds the container, the excess will be hidden.
1.contain attribute:
This attribute value can enlarge or reduce the background image.
is similar to the cover attribute. It can enlarge or reduce the image in equal proportions, but cover only covers the container to a minimum, while contain only requires the container to be covered in a certain direction, such as vertical or horizontal, which can minimally cover the container. Container coverage.
The code example is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
ul li{
width:450px;
height:300px;
border:5px solid green;
list-style:none;
margin-top:10px;
}
.test{
background-image:url(http://cdn.duitang.com/uploads/item/201309/22/20130922202150_ntvAB.thumb.600_0.jpeg);
background-size:contain;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<ul>
<li class="test"></li>
</ul>
</body>
</html>In the above code, the background image is scaled proportionally. Since the container element can be filled first in the vertical direction, the attempt is given up in the horizontal direction.
![Front-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Zero-based front-end course [Vue advanced learning and practical application]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![WEB front-end tutorial [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Apipost practical application [api, interface, automated testing, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
