CSS - Hintergrund-Bilder nicht korrekt anzeigen auf mobilen Browsern
Hintergrund Bilder von einer website an der ich arbeite (http://tinyurl.com/ax68brt) werden nicht richtig angezeigt auf dem Handy-Browser. Das problem tritt mit dem outheader, outbeurzen und outtwitter divs. Der header-hintergrund wird nicht angezeigt in 100% Breite, und die Hintergründe für die outbeurzen/outtwitter divs werden nicht richtig angezeigt.
Was läuft hier falsch?
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%;
}
InformationsquelleAutor Lerrie | 2013-03-03
Du musst angemeldet sein, um einen Kommentar abzugeben.
Sollten Sie nicht verwenden
background-attachment: fixed;
auf mobilen Browsern, es ist buggy und der repaint ist viel zu teuer.Siehe f.e.
Android/Mobile Webkit-CSS-Background-Attachment:Fixed Nicht Funktioniert? oder
https://twitter.com/paul_irish/status/306818591196602368
Du bist auch fehlt ein
<meta name="viewport" … >
(Viewport-meta-tag auf Ihrer Website finden Sie unter https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tagInformationsquelleAutor Volker E.
geben meta-tag im html-header-Teil .
InformationsquelleAutor abhishek ringsia