CSS - Фоновые изображения не отображаются должным образом в мобильных браузерах

Question

Фоновые изображения веб-сайта, над которым я работаю (http://tinyurl.com/ax68brt), отображаются неправильно в браузерах для мобильных телефонов. Проблема возникает с заголовками outheader, outbeurzen и outtwitter. Фон заголовка не отображается с шириной 100%, а фоны для разделов outbeurzen/outtwitter также отображаются неправильно.

Что здесь общего не работает?

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%; 
    } 

Answer 1

Вы не должны использовать background-attachment: fixed; на мобильных браузерах, он ошибочен и перекрашивать слишком дорого. См. F.e.

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

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

Вы также отсутствует <meta name="viewport" … > (Viewport) мета тег на сайте, см https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag

Answer 2

дают мета-тег в HTML части заголовка.

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