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 Die ID aus der CSS: 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!!

Hallo

Ich sehe mehrere Probleme. Die alle aufzulisten und vor allem zu erklären würde aber den Rahmen des Forums sprengen.

Jein. Es gibt zu viele Fenstergrößen und -verhältnisse. Hintergrundbilder müssen deshalb

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.

Cover steht in der externen CSS-Datei. Du gibst dem div aber auch Inline-CSS mit auf den Weg: style="...

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