Home > Article > Web Front-end > How to set the background image size in css
How to set the background image size in css
- 青灯夜游Original
- 2021-03-31 16:35:3512769browse
In CSS, you can use the background-size attribute to set the size of the background image; the syntax format is "background-size:length|%|cover|contain;" and the default value is "auto".
The operating environment of this tutorial: Windows 7 system, CSS3 version, Dell G3 computer.
css set background image size
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
background: url(img/1.jpg);
background-size: 80px 60px;
background-repeat: no-repeat;
padding-top: 40px;
}
</style>
</head>
<body>
<p>
Lorem ipsum，中文又称“乱数假文”， 是指一篇常用于排版设计领域的拉丁文文章 ，主要的目的为测试文章或文字在不同字型、版型下看起来的效果。
</p>
<p>原始图片: <img src="img/1.jpg" alt="Flowers" width="224" style="max-width:90%"></p>
</body>
</html>Rendering:
[Recommended tutorial: CSS Video tutorial】
css background-size attribute
The background-size attribute specifies the size of the background image.
Syntax
background-size: length|percentage|cover|contain;
| Value | Description |
|---|---|
| length | Set the background image height and width. 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 | will calculate the positioning area relative to the background percentage. 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" |
| cover | The aspect ratio of the image will be maintained and the image will be scaled The minimum size that will completely cover the background positioning area. |
| contain | The aspect ratio of the image is maintained and the image is scaled to the maximum size that will fit into the background positioning area. |
For more programming related knowledge, please visit: Programming Video! !
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!