Hallo zusammen
Auf Mobiles werden im Portrait-Format die Hintergrundbilder meiner Seite nicht korrekt verkleinert.
Die Site ist hier
Testseite.
Wenn ich im Header den Meta-Tag <meta name="viewport" content="width=device-width, initial-scale=1.0"> lösche, werden die Hintergrundbilder zwar verkleinert, aber immer noch abgeschnitten. Hier ein Printscreen
Hier etwas Code: Aus der Index die div für das HG-Bild
HTML-Code:
<div id="hintergrundbild" style="background: transparent url(img/<?PHP echo $row['bild'];?>) no-repeat center center fixed;">
Die ID aus der CSS:
Code:
#hintergrundbild {
width: 100%;
height:100%;
position: fixed;
top: 0;
left: 0;
z-index: -1;
background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Die Bilder kommen mit PHP aus der MySQL und werden mit JS eingelesen.
Was mache ich falsch?
- Müssen die Bilder in einem bestimmten Verhältnis (Breite/Höhe) sein?
- Wieso wird 'cover' nicht ausgeführt?
Kann mir jemand helfen?
Danke!!