Search code examples
htmlcssbackground-imagemobile-browser

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>
Solution

  • 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;