Home >Web Front-end >Front-end Q&A >How to add background image in css
How to add background image in css
- 藏色散人Original
- 2021-03-22 14:34:1710966browse
How to add a background image to css: first create an HTML sample file; then create a div; and finally set the background image through the "background-image:url(1.jpg);" attribute.
The operating environment of this article: Windows7 system, HTML5&&CSS3 version, DELL G3 computer
In css, you can pass the background-image attribute or background attribute to set the background image. The background-image attribute is used to set the background image of an element; the background attribute is a shorthand attribute that can set all background attributes in one statement.
background attribute value:
background-color specifies the background color to be used
background-position specifies the position of the background image
background-size specifies the background The size of the image
background-repeat Specifies how to repeat the background image
background-origin Specifies the positioning area of the background image
background-clip Specifies the painting 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
The background of the element is the element's Total size, 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.
[Recommended learning: css video tutorial]
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div{
width:450px;
height: 360px;
background-image:url(1.jpg);
/*background:url(1.jpg);*/
background-size:450px;/*设置图片大小*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>Rendering:
The above is the detailed content of How to add background image in css. For more information, please follow other related articles on the PHP Chinese website!