CSS - 모바일 브라우저에서 배경 이미지가 제대로 표시되지 않습니다.

Question

휴대 전화 브라우저에 내가 작업중인 웹 사이트의 배경 이미지 (http://tinyurl.com/ax68brt)가 제대로 표시되지 않습니다. 문제는 outheader, outbeurzen 및 outtwitter div에서 발생합니다. 머리글 배경이 100 % 너비로 표시되지 않으며 outbeurzen/outtwitter div의 배경이 제대로 표시되지 않습니다.

여기에 무슨 문제가 있습니까?

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;를 사용하지 않아야합니다, 그것은 버그 그리고 다시 그리기가 너무 비싸다. 참조.

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

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

당신은 또한 귀하의 사이트에 <meta name="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" />