CSS - 背景图像在移动浏览器上无法正常显示

我正在使用的网站（http://tinyurl.com/ax68brt）的背景图像在手机浏览器中无法正常显示。 outheader，outbeurzen和outtwitter divs发生问题。标题背景不以100％宽度显示，并且outbeurzen/outtwitter div的背景也未正确显示。CSS - 背景图像在移动浏览器上无法正常显示

这里怎么回事？

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

来源

2013-03-03 Lerrie

你不应该在移动浏览器使用background-attachment: fixed;，它是越野车和重绘的代价太大。参见f.e.

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

来源

2013-03-03 23:17:32

通过使用视口和媒体查询来修复它：background-attachment：scroll; – Lerrie 2013-03-05 18:06:56

给在HTML头部分meta标签。

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

来源

2015-06-01 09:54:50

CSS - 背景图像在移动浏览器上无法正常显示

回答

相关问题