Home > Article > Web Front-end > How to use css background-size attribute
How to use css background-size attribute
- 藏色散人Original
- 2019-05-29 10:47:294405browse
css background-size attribute can set the size of the background image. Syntax: background-size: length|percentage|cover|contain; Set the image size through length value or percentage, or scale the image through cover and contain.
How to use the css background-size attribute?
Function: Specifies the size of the background image.
Syntax:
background-size: length|percentage|cover|contain;
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 Expands the background image to be 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 anchor area. contain Expands the image to its maximum size so that its width and height fit entirely within the content area.
Note: IE9, Firefox 4, Opera, Chrome and Safari 5 support the background-size attribute.
css background-size property usage example
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background:url('https://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg');
background-size:100px 63px;
-moz-background-size:100px 63px; /* 老版本的 Firefox */
background-repeat:no-repeat;
padding-top:80px;
}
</style>
</head>
<body>
<p>上面是缩小的背景图片。</p>
<p>原始图片：<img src="https://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg" alt="Flowers"></p>
</body>
</html>Effect output:
The above is the detailed content of How to use css background-size attribute. For more information, please follow other related articles on the PHP Chinese website!