You can use the background-size attribute in css to set the size of the background image. The syntax is "background-size: value | percentage | cover | contain;"; where cover represents the proportional expansion of the image to fill the element, and contain represents Scale down the image proportionally to fit the element's dimensions.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
css3 Set the size of the background image
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
padding-top:40px;
}
</style>
</head>
<body>
<p>
Lorem ipsum，中文又称“乱数假文”， 是指一篇常用于排版设计领域的拉丁文文章 ，主要的目的为测试文章或文字在不同字型、版型下看起来的效果。
</p>
<p>原始图片: <img src="/try/demo_source/img_flwr.gif" alt="Flowers" width="224" style="max-width:90%"></p>
</body>
</html>
##css3 background-size attribute## The #background-size attribute specifies the size of the background image; it can be used on Firefox, Chrome, and IE9.
The specific usage is as follows:
#background-size{
background-size:200px 100px;
}#background-size2{
background-size:30% 60%;
}#background-size3{
background-size:cover;
}#background-size4{
background-size:contain;
}##
#background-size5{
background-size:auto;
}The above is the detailed content of How to set the background image size in css. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
