Home  >  Article  >  Web Front-end  >  How to set background image in css3

How to set background image in css3

王林
王林Original
2021-05-17 14:08:133385browse

The way to set the background image in css3 is to add the attribute [background-image: url(css.jpg)]. The background-image attribute is used to set the background image of an element, and fill in the URL address of the image in the URL.

How to set background image in css3

The operating environment of this article: windows10 system, css 3, thinkpad t480 computer.

If we want to add a background image, we can select the background-image attribute, which can introduce a local image as the background.

The background-image property sets the background image of an element.

Attribute value:

  • ##url('URL') Image URL

The specific code is as follows:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			div{
				width: 200px;
				height: 200px;
				border: 1px solid black;
				background-image: url(css.jpg);/* 引入图片 */
				background-size: 100px 100px;/* 设置图片的大小 */
background-repeat: no-repeat;/* 如果图片比较小,框比他大的时候,设置的显示方式,repeat-x沿x轴显示,repeat-y沿y轴显示 */
background-position: 50% 50%;/* 设置图片的位置,left top左上,center center居中..... */
			}
		</style>
		<title></title>
	</head>
	<body>
		<div></div>
	</body>
</html>

Related video tutorials:

css video tutorial

The above is the detailed content of How to set background image in css3. 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