Use CSS to add background image methods to unknown, wide-height elements

Adds a background image to an element of the page, which cannot be displayed when no specific width is specified.

1. Add a background map

HTML code:

<! DOCTYPE html>
We can look at the page effect:


In order to adapt to different terminals of the screen size, we can not write the width of the dead, how to do? You can take the following methods:

HTML code:

<! DOCTYPE html>
Take a look at the page effect:


Mobile page Effects


Note: If you remove the div, directly add the style to the body, the PC browser can display, the Android phone can also be displayed, but in the Apple phone is not displayed. Repeated tests repeatedly, all reproduce this bug (if a friend encountered such a positive solution to the problem, welcome advice!) ）


(for Apple models)

2. Add a background image via the IMG tag

HTML code:

<! DOCTYPE html>
When I look at the page effect, we find that the picture is rendered in hundred percent actual size, which is obviously not the effect we want.


Very similar to the example above, we just need a little modification.

HTML code:

<! DOCTYPE html>
Viewing page effects under different analog models can be achieved by:


About the Background-size attribute, which is defined by the