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

How to insert background image in css style

青灯夜游

Release： 2020-12-18 11:10:56

Original

21324 people have browsed it

In CSS, you can use the background-image or background attribute to insert a background image. The basic syntax format is "background-image/background:url('URL')". The parameter URL is used to specify the background image. path.

How to insert background image in css style

The operating environment of this tutorial: Windows 7 system, HTML5 CSS3 version, this method is suitable for all brands of computers.

Recommended: "css video tutorial"

In css, you can use the background-image or background attribute to insert a background image.

background-image property

The background-image property sets 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).

Syntax:

background-image:url(&#39;URL&#39;));

Copy after login

url('URL') Image URL

By default, background-image is placed in the upper left corner of the element, and repeat vertically and horizontally.

Tip: Please set an available background color so that if the background image is not available, the background ribbon can be used instead.

background attribute

The background attribute is a property that specifically sets the background. You can set the background color or background image.

The background attribute is a shorthand attribute that can set all background attributes in one statement.

The properties that can be set are:

background-color: Specifies the background color to be used.
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.
background-attachment: Specifies whether the background image is fixed or scrolls with the rest of the page.
background-image: Specifies the background image to use.

Example:

background:url(bgimg.gif) no-repeat 5px 5px;

Copy after login

Explained below:

How to insert background image in css style

Background image example:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>背景图片设置</title>
		<style>
			.demo1{
				width: 400px;
				height: 200px;
				background-color: #fff;
				background-image: url(bg.jpg);
				background-repeat: no-repeat;
				background-size: cover;
			}
			.demo2{
				width: 400px;
				height: 200px;
				background:#fff url(bg.jpg) no-repeat;
				background-size: cover;
			}
		</style>
	</head>
	<body>
		<div class="demo1"></div><br />
		<div class="demo2"></div>
	</body>
</html>

Copy after login

How to insert background image in css style

For more programming-related knowledge, please visit: Introduction to Programming! !

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