css how to set background image for element-Front-end Q&A-php.cn

css how to set background image for element

醉折花枝作酒筹

Release： 2021-08-13 10:45:02

Original

2146 people have browsed it

In the previous article, we learned about the method of specifying the background drawing area, please see "Skillfully Use CSS to Specify the Background Drawing Area". This time we will take a look at how to set a background image for an element. You can refer to it if necessary.

When we want to use a picture as the background of an element, how should we do it?

Let’s look at a small example.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body{
      background-image: url("images/2.jpg");
      background-repeat:no-repeat;
    }
  </style>
</head>
<body>
<div>为了显示，表明这个一个div元素</div>
<p>为了显示，表明这个一个p元素</p>
<div>为了显示，表明这个一个div元素</div>
<p>为了显示，表明这个一个p元素</p>
<div>为了显示，表明这个一个div元素</div>
<p>为了显示，表明这个一个p元素</p>
<div>为了显示，表明这个一个div元素</div>
<p>为了显示，表明这个一个p元素</p>
<div>为了显示，表明这个一个div元素</div>
<p>为了显示，表明这个一个p元素</p>
<div>为了显示，表明这个一个div元素</div>
<p>为了显示，表明这个一个p元素</p>
</body>
</html>

Copy after login

The result of this small example is

css how to set background image for element

As you can see, the picture we like becomes the background of the element. This is because we use the background-image attribute.

Let’s take a look at this property.

The background-image attribute sets the background image for the element. An element's background occupies the entire 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 horizontally and vertically.

Warm Tips:

Please set an available background color, so that if the background image is not available, the page can still get good visual effects .

When drawing, images are stacked in the z direction. The image specified first will be drawn on top of the image specified later. So the first image specified is "closest to the user".

Then the element's border will be drawn above them, and background-color will be drawn below them. The relationship between the drawing of the image, the box and the border of the box needs to be defined in the CSS properties background-clip and background-origin.

If a specified image cannot be drawn (for example, the file represented by the specified URI cannot be loaded), the browser will treat this situation as if its value was set to none.

Recommended learning: css video tutorial

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