How to add background image in css

藏色散人
Release: 2023-01-03 09:30:58
Original
10935 people have browsed it

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.

How to add background image in css

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>
Copy after login

Rendering:

How to add background image in css

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!

Related labels:
css
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template