How to change the background image size in css-CSS Tutorial-php.cn

How to change the background image size in css

青灯夜游

Release： 2021-11-10 17:05:51

Original

30266 people have browsed it

In CSS, you can change the size of the background image by setting the background-size attribute style for the background image. The function of this attribute is to specify the size of the background image. The syntax is "background-size: width value height value; ".

How to change the background image size in css

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

In CSS, you can change the size of the background image by setting the background-size attribute style to the background image.

The background-size attribute specifies the size of the background image.

Syntax: background-size: length|percentage|cover|contain;

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 given and the second one is set to auto
percentage will calculate the percentage relative to the background positioning area. 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 which will maintain the aspect ratio of the image and scale the image to completely cover the background positioning The minimum size of the region.
contain This will maintain the aspect ratio of the image and scale the image to the maximum size that will fit within the background positioning area.

Example:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			div{
				width: 400px;
				height: 224px;
			}
			.box1{
				background:url(img/2.jpg) no-repeat;
			}
			.box2{
				background:url(img/2.jpg) no-repeat;
				background-size: 200px 160px;
				
			}
		</style>
	</head>

	<body>
		<p><strong>原始图片大小</strong></p> 
		
		<div class="box1"></div> 
		<p>本身这个图片宽度为400px，高度224px</p>
		<br />
		<p><strong>通过CSS background-size修改后的背景图片</strong></p> 
		<div class="box2"></div>
	</body>

</html>

Copy after login

How to change the background image size in css

(Learning video sharing: css video tutorial)

The above is the detailed content of How to change the background image size in css. For more information, please follow other related articles on the PHP Chinese website!