Home > Article > Web Front-end > How to make the background image smaller in css
How to make the background image smaller in css
- 青灯夜游Original
- 2021-09-10 18:06:206574browse
In CSS, you can use the background-size attribute to make the background image smaller. This attribute can control the size of the background image. You only need to add the "background-size: width value height value;" style to the background element. That’s it.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
In CSS, you can use the background-size attribute to make the background image smaller.
The background-size attribute is used to specify the size of the background image. The syntax format is as follows:
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. |
Example:
Add a background image to the div element
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 100%;
height: 1000px;
background: url(img/1.jpg) no-repeat;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Rendering:
Use the background-size attribute below to control the size of the background image
div{
width: 100%;
height: 1000px;
background: url(img/1.jpg) no-repeat;
background-size:200px 250px;
}Rendering:
Recommended tutorial : "CSS Video Tutorial"
The above is the detailed content of How to make the background image smaller in css. For more information, please follow other related articles on the PHP Chinese website!