Specifies the size of the background image
background-size: 背景图片宽度 背景图片高度;
Unit: Length|Percentage (relative to the parent box)|cover|contain;
Example: Put a background image in a div with a red border. When it is not set, the original size of the image will be displayed.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 1000px;
height: 600px;
border: 1px solid red;
/* 图片宽度是500*500 */
background: url(imgs/girl.jpg) no-repeat;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
- Write 2 parameters: background-size: 500px 800px;
- Only write one parameter is definitely the width and height omitted will be proportionally zoomed
- The unit can be compared with% relative to the parent box
- If cover is stretched in proportion to fully cover the div box, some background pictures may not be displayed completely
- The contain height and width are stretched proportionally. When the width or height is full, the div box will no longer be stretched. There may be some blank areas.
cover (equivalent to 100%):
contain
