Background-Images auf Mobiles werden nicht korrekt verkleinert
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 http://www.prunkstuecke.ch/st/img/Screenshot1.png 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;"> Code:
#hintergrundbild { 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!! |
Hallo
Ich sehe mehrere Probleme. Die alle aufzulisten und vor allem zu erklären würde aber den Rahmen des Forums sprengen. Zitat:
a) entweder so vergrößert werden, dass sie entweder in der Höhe oder Breite beschnitten werden b) so verkleinert werden, dass sie entweder oben oder unten einen Rahmen haben c) auf die Fenstergröße skaliert werden, wobei sie aber in der Regel verzerrt werden. Hintergrundbilder sollen nur schmückendes Beiwerk sein. Fotos, grade auch wenn sie wie in deinem Beispiel ein Produkt anzeigen, sind als Hintergrundbilder weder gedacht noch geeignet. Spätestens mit der Einführung von CSS3 mit der Möglichkeit der Farbverläufe ist die Zeit von Hintergrundbildern abgelaufen. Von daher ist es sinnvoller deine Bilder als img-Element einzubinden. Gleichzeitig gibt es weniger Probleme mit dem CSS und damit der Darstellung. Zitat:
Damit überschreibst du die CSS-Anweisung aus der externen CSS-Datei. Gruss MrMurphy |
Danke MrMurphy
Dann fange ich mal an, die Site neu aufzusetzen und werde die Bilder als img-Elemente einbinden. Gruss, WB |
Alle Zeitangaben in WEZ +2. Es ist jetzt 20:52 Uhr. |
Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.
© Dirk H. 2003 - 2023