Image background (fixed, center) issues on mobile devices

问题

I have an image background on my website:

body {
    background-image:url('tlo.jpg');
    background-color:#000000;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position: center center;
    background-size: auto auto;
    (...)
}

There are not any problems on PC, but mobile devices with vertical screen renders background not exactly in the same way: it seems that mobile browsers fit the background horizontally, so vertically it covers only small piece of website. I've tried to fix it by using different values for background-size attribute, but it didn't work.

My CSS + HTML:

body {
    background-image:url('tlo.jpg');
    background-color:#000000;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position: center center;
    background-size: auto auto;
    margin-left: 0;
    margin-right: 0;
}

#overall {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    height: 100%;
}

#logo {
    position:absolute;
    left:0;
    top:0;
}

#content {
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    width: 100%;
    height: 300px;
    background-color:rgba(255,255,255,0.5);
    text-align: center;
}

and

<body>
    <div id="overall">
        <div id="logo"><img src="logo.png" width="654" height="150"></div>
        <div id="content"><a href="#"><img src="cont.png" border="0"></a></div>
    </div>
</body>

回答1:

This is the solution that I came up with. It works perfect on both landscape and portrait screens.

background: url(bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

回答2:

I would suggest you to load two different images. One for desktops and another for mobile devices. You can use the less sized image for the mobile devices which can in turn reduce your loading time for mobile devices. You can use the CSS Media Queries to do so. Here is a tutorial for the CSS Media Queries. CSS Media Queries & Using Available Space

来源：https://stackoverflow.com/questions/23753677/image-background-fixed-center-issues-on-mobile-devices

标签

html

css

background-image

mobile-browser