Home >Web Front-end >Front-end Q&A >How to set background image in css

How to set background image in css

藏色散人Original: 2021-04-23 09:12:579663browse

How to set the background image in css: first create an HTML sample file; then create a div in the body; finally set it through the "background-image: url("images/22.jpg");" attribute Just a background image.

The operating environment of this article: Windows7 system, HTML5&&CSS3 version, Dell G3 computer.

css can set the background image through the background-image attribute. The background-image attribute is used to set 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). By default, the background-image is placed in the upper left corner of the element and repeats both vertically and horizontally.

css syntax:

background-image：url|none|inherit

background-image attribute value:

url URL of the image

none No image background will be displayed. This is the default

inherit specifies that the background image should be inherited from the parent element

[Recommended learning: css video tutorial]

Example:

<!DOCTYPE html>
<html>
<head>
<style>
div{
width:450px;
height: 300px;
background-image: url("images/22.jpg");
}
</style>
</head>
<body>
<div></div>
</body>
</html>

Rendering:

How to set background image in css

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 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 image

background-attachment Sets whether the background image is fixed or scrolls with the rest of the page

background-image Specifies one or more to use background images

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

html5 css css3 html 继承 position background

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

Previous article：Is css case sensitive?Next article：Is css case sensitive?

See more

How to set background image in css

Related articles