How to make the background image smaller in css-Front-end Q&A-php.cn

How to make the background image smaller in css

青灯夜游

Release： 2023-01-11 09:19:25

Original

6619 people have browsed it

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.

How to make the background image smaller in css

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;

Copy after login

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>

Copy after login

Rendering:

How to make the background image smaller in css

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;
}

Copy after login

Rendering:

How to make the background image smaller in css

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!