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

How to set the background image size in css

青灯夜游

Release： 2023-01-03 09:32:06

Original

12879 people have browsed it

In CSS, you can use the background-size attribute to set the size of the background image; the syntax format is "background-size:length|%|cover|contain;" and the default value is "auto".

How to set the background image size in css

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

css set background image size

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			body {
				background: url(img/1.jpg);
				background-size: 80px 60px;
				background-repeat: no-repeat;
				padding-top: 40px;
			}
		</style>
	</head>

	<body>
		<p>
			Lorem ipsum，中文又称“乱数假文”， 是指一篇常用于排版设计领域的拉丁文文章 ，主要的目的为测试文章或文字在不同字型、版型下看起来的效果。
		</p>

		<p>原始图片: <img src="img/1.jpg" alt="Flowers" width="224"    style="max-width:90%"></p>

	</body>

</html>

Copy after login

Rendering:

How to set the background image size in css

[Recommended tutorial: CSS Video tutorial】

css background-size attribute

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

How to set the background image size in css

Syntax

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.

For more programming related knowledge, please visit: Programming Video! !

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