The background-size attribute is used to set the size of the background image. The image size can be set by the length value or percentage, or the image can be scaled through cover and contain.
CSS background-size attribute
Function: Specifies the size of the background image.
Note: Before CSS3, the size of the background image was determined by the actual size of the image. In CSS3, the size of the background image can be specified, which allows us to reuse the background image in different environments.
Grammar:
background-size: length|percentage|cover|contain;
| Value | Description |
| 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 set, the second value will be 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 will be set to "auto". |
| cover | Expand the background image 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 image to its maximum size so that its width and height fully fit within the content area. |
CSS background-size property usage example
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background:url(https://img.php.cn/upload/article/000/000/024/5c513adf97e86533.jpg);
background-size:63px 100px;
-moz-background-size:63px 100px; /* 老版本的 Firefox */
background-repeat:no-repeat;
padding-top:80px;
}
</style>
</head>
<body>
<p>上面是缩小的背景图片。</p>
<p>原始图片：<img src="https://img.php.cn/upload/article/000/000/024/5c513adf97e86533.jpg" alt="Flowers"></p>
</body>
</html>Rendering:
The above is the entire content of this article, I hope it will be helpful to everyone's study. For more exciting content, you can pay attention to the relevant tutorial columns of the PHP Chinese website! ! !
The above is the detailed content of How to use the background-size attribute. 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)
