How to add a background image to an element of unknown width and height using css-CSS Tutorial-php.cn

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

高洛峰

Release： 2017-03-23 11:19:03

Original

2180 people have browsed it

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:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="format-detection" content="email=no"/>
    <title></title>
    <style>
        *{margin:0; padding:0;}
        #wrap{
            width:100%;
            height:auto;
            background:url(&#39;images/page.jpg&#39;) no-repeat center center;
            background-size:cover;
        }
    </style>
</head>
<body>
    <div id="wrap">
    </div>
</body>
</html>

Copy after login

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

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

#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:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="format-detection" content="email=no"/>
    <title></title>
    <style>
        *{margin:0; padding:0;}
        #wrap{
            width:100%;
            height:100%;
            background:url(&#39;images/page-small.jpg&#39;) no-repeat;
            background-size:cover;
            position:fixed;
            z-index:-10;
            background-position:0 0;
        }
    </style>
</head>
<body>
    <div id="wrap">
    </div>
</body>
</html>

Copy after login

Let’s take a look at the page effect:

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

Mobile page effect

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

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!)

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

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

2. Add a background image through the img tag

HTML code:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="format-detection" content="email=no"/>
    <title></title>
    <style>
        *{margin:0; padding:0;}
    </style>
</head>
<body>
    <div id="wrap">
        <img class="imgBcground" src="images/page-small.jpg" alt="">
    </div>
</body>
</html>

Copy after login

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

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

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

HTML code:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="format-detection" content="email=no"/>
    <title></title>
    <style>
        *{margin:0; padding:0;}
        .imgBcground{
            display:block;
            width:100%;
            height:100%;
            position:fixed;
            z-index:-10;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <img class="imgBcground" src="images/page-small.jpg" alt="">
    </div>
</body>
</html>

Copy after login

The page effect can be viewed under different simulation models:

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

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!