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

How to set background image in css

青灯夜游

Release： 2021-11-09 14:17:28

Original

72908 people have browsed it

How to set the background image in css: 1. Use the background-image attribute, the syntax "background-image:url(picture url);"; 2. Use the background attribute, the syntax "background:url(picture url) url);".

How to set background image in css

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

In css, you can set the background image through the background-image attribute or background attribute.

The background-image attribute is used to set the background image of an element; the background of an element is the total size of the element, including padding and borders (but not margins). By default, the background-image is placed in the upper left corner of the element and repeats both vertically and horizontally.

<!DOCTYPE html>
<html>
	<head>
		<style>
			div {
				width: 450px;
				height: 360px;
				background-image: url(img/1.jpg);
				background-size: 450px;/*设置图片大小*/
			}
		</style>
	</head>

	<body>
		<div></div>
	</body>
</html>

Copy after login

How to set background image in css

The background attribute is a shorthand attribute that can set all background attributes in one statement, including:

background -color specifies the background color to use
background-position specifies the position of the background image
background-size specifies the size of the background image
background-repeat Specifies how to repeat the background image
background-origin Specifies the positioning area of the background image
background-clip Specifies the drawing area of the background image
background-attachment Sets whether the background image is fixed or scrolls with the rest of the page
background-image specifies one or more background images to use

Example:

div {
	width: 450px;
	height: 360px;
	background: url(img/2.jpg);
	background-size: 450px;/*设置图片大小*/
}

Copy after login

How to set background image in css

(Learning video sharing:css video tutorial)

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