XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Background-Images auf Mobiles werden nicht korrekt verkleinert (http://xhtmlforum.de/showthread.php?t=73055)

berna1 01.11.2016 12:52

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;">
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!!

MrMurphy 01.11.2016 14:06

Hallo

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

Zitat:

Müssen die Bilder in einem bestimmten Verhältnis (Breite/Höhe) sein?
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.

Zitat:

Wieso wird 'cover' nicht ausgeführt?
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

berna1 01.11.2016 15:13

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