CODEWITHSUNDEEP
cssimagemobilebrowserbackground
Lerrie
Lerrie

Reputation: 11

CSS - Background images not displaying properly on mobile browsers

The background images of a website I'm working on (http://tinyurl.com/ax68brt) are not displaying properly on mobile phone browsers. The problem occurs with the outheader, outbeurzen and outtwitter divs. The header background is not displayed in 100% width, and the backgrounds for the outbeurzen/outtwitter divs are not properly displayed either.

What is going wrong here?

Html:

<div id="outheader"></div>
<div id="outintro"></div>
<div id="outbeurzen"></div>
<div id="outfoto"></div>
<div id="outtwitter"></div>
<div id="outfooter"></div>

Css:

#outheader {
background-image: url(images/achtergrond/header.jpg);
float: left;
height: 660px;
width: 100%;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: 50% 0px;
margin: 0px;
padding: 0px;}

    #outintro {
background-image: url(images/achtergrond/body.jpg);
float: left;
height: auto;
width: 100%;
background-attachment: fixed;
background-repeat: repeat-y;
background-position: 50%;
padding-top: 60px;
padding-bottom: 60px;
    }

    #outbeurzen {
background-image: url(images/achtergrond/beurzen.jpg);
float: left;
height: 315px;
width: 100%;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: 50% -300px;
    }

    #outfoto {
background-image: url(images/achtergrond/body.jpg);
float: left;
height: auto;
width: 100%;
background-attachment: fixed;
background-repeat: repeat-y;
background-position: 50%;
margin-bottom: 70px;
margin-top: 70px;
    }

    #outtwitter {
background-image: url(images/achtergrond/twitter.jpg);
float: left;
height: 315px;
width: 100%;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: 50%;
font-family: 'Roboto Condensed', sans-serif;
    }

    #outfooter {
background-image: url(images/achtergrond/body.jpg);
float: left;
height: 240px;
width: 100%;
background-attachment: fixed;
background-repeat: repeat-y;
background-position: 50%;
    }

Upvotes: 1

Views: 28457

Answers (2)

abhishek ringsia
abhishek ringsia

Reputation: 2050

give meta tag in html header part . 

 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

Upvotes: 0

Volker E.
Volker E.

Reputation: 6035

You shouldn't use background-attachment: fixed; on mobile browsers, it's buggy and the repaint is too costly. See f.e.

Android/Mobile Webkit CSS Background-Attachment:Fixed Not Working? or

https://twitter.com/paul_irish/status/306818591196602368

You're also missing a <meta name="viewport" … > (Viewport meta) tag on your site, see https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag

Upvotes: 5

Related Questions