Home > Article > Web Front-end > How to insert background image in css style
How to insert background image in css style
- 青灯夜游Original
- 2020-12-18 11:10:5621270browse
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.
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('URL'));
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;
Explained below:
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>
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!