How to add a background image to an element of unknown width and height using css

Add a background image to a certain element of the page. When the specific width and height are not specified, the effect cannot be displayed.

1. Add a background image

HTML code:

We can take a look at the screenshot of the page effect:

#In order to adapt to the screen size of different terminals, we cannot write the width and height to death, so what should we do? You can take the following methods:

HTML code:

Let’s take a look at the page effect:

Mobile page effect

Note: If you remove the div and add the style directly to the body, it can be displayed on PC browsers and Android phones, but it cannot be displayed on Apple phones. After many repeated tests, this bug is reproduced (if any friends encounter the correct solution to this kind of problem, please give us advice!)

(The picture above is for an Apple model. Screenshot)

2. Add a background image through the img tag

HTML code:

When checking the page effect, I found that the image is presented at 100% actual size, which is obviously not the case. The effect we want

is very similar to the above example, we just need to modify it slightly

HTML code:

The page effect can be viewed under different simulation models:

Regarding the background-size attribute, W3C defines it like this

The above is the detailed content of How to add a background image to an element of unknown width and height using css. For more information, please follow other related articles on the PHP Chinese website!