Home > Article > Web Front-end > How to set background image size in css
How to set background image size in css
- 王林Original
- 2021-05-18 15:46:019896browse
The way to set the size of the background image in css is to add the background-size attribute to the background image, and set the attribute value to the required width and height, such as [background-size:80px 60px;].
The operating environment of this article: windows10 system, css 3, thinkpad t480 computer.
There is an attribute background-size in css, which is specially used to specify the size of the background image.
Syntax:
background-size: length|percentage|cover|contain;
Attribute value:
length Set 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 given and the second one is set to auto
percentage will calculate the percentage relative to the background positioning area. 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 which will maintain the aspect ratio of the image and scale the image to completely cover the background positioning The minimum size of the region.
contain This will maintain the aspect ratio of the image and scale the image to the maximum size that will fit within the background positioning area.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body
{
background:url(/try/demo_source/img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
padding-top:40px;
}
</style>
</head>
<body>
<p>原始图片: <img src="/try/demo_source/img_flwr.gif" alt="Flowers" width="224" style="max-width:90%"></p>
</body>
</html>Run result:
Related recommendations:css video Tutorial
The above is the detailed content of How to set background image size in css. For more information, please follow other related articles on the PHP Chinese website!