Bild-hintergrund (fester, center) Probleme auf mobilen Geräten
Habe ich ein Bild im hintergrund auf meiner website:
body {
background-image:url('tlo.jpg');
background-color:#000000;
background-repeat:no-repeat;
background-attachment:fixed;
background-position: center center;
background-size: auto auto;
(...)
}
Gibt es keine Probleme auf dem PC, sondern mobile Geräte mit vertikalen Bildschirm rendert im hintergrund nicht genau in der gleichen Weise: es scheint, dass die mobilen Browser passen hintergrund, horizontal, also senkrecht, es deckt nur einen kleinen Stück website. Ich habe versucht es zu beheben durch die Verwendung unterschiedlicher Werte für background-size
- Attribut, aber es hat nicht funktioniert.
Mein CSS + HTML:
body {
background-image:url('tlo.jpg');
background-color:#000000;
background-repeat:no-repeat;
background-attachment:fixed;
background-position: center center;
background-size: auto auto;
margin-left: 0;
margin-right: 0;
}
#overall {
margin-left: 0;
margin-right: 0;
width: 100%;
height: 100%;
}
#logo {
position:absolute;
left:0;
top:0;
}
#content {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
width: 100%;
height: 300px;
background-color:rgba(255,255,255,0.5);
text-align: center;
}
und
<body>
<div id="overall">
<div id="logo"><img src="logo.png" width="654" height="150"></div>
<div id="content"><a href="#"><img src="cont.png" border="0"></a></div>
</div>
</body>
Du musst angemeldet sein, um einen Kommentar abzugeben.
Dies ist die Lösung, die ich kam mit. Es funktioniert perfekt auf beiden hoch-und Querformat-Bildschirme.
Ich würde vorschlagen, Sie laden zwei verschiedene Bilder. Eine für desktops und eine für mobile Geräte. Sie können verwenden, die weniger große Bild für die mobilen Geräte, die im Gegenzug reduzieren Sie Ihre Ladezeiten für mobile Geräte. Sie können die CSS-Media-Abfragen zu tun. Hier ist ein tutorial für das CSS Media Queries.
CSS Media Queries & Über Verfügbaren Speicherplatz