Home > Article > Web Front-end > How to change background image size with css

How to change background image size with css

青灯夜游Original: 2021-10-12 18:13:2826827browse

In CSS, you can use the background-size attribute to change the size of the background image. The function of this attribute is to specify the size of the background image. You can change the image size by setting the attribute value to a length value or a percentage, or by Set the attribute value to the cover and contain keywords to scale the image.

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

In CSS, if you want to change the size of the background image, you can set the background-size attribute.

The background-size attribute can specify the background image size. Syntax format:

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.

The background-size attribute can set the image size through the length value or percentage, or scale the image through cover and contain.

Example:

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

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

</html>

Rendering:

How to change background image size with css

(Learning video sharing: css video tutorial )

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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to set border color in cssNext article：How to set border color in css

See more

How to change background image size with css

Related articles