Hintergrund-für welche Auflösungen optimieren?Eure *Meinung*

Hallo, erstelle grade eine winterliche Hintergrundgrafik und habe die nun in 1920x600px so angelegt, das sie in folgenden Auflösungen immer gut aussieht: 1. 1280x1024 2. 1680x1050 3. 1920x1080 Die Grafik wird entsprechend meinen Einstellungen im CSS immer fixed, zentriert und ungezoomt angezeigt, ohne Wiederholungen. Bei 1280x1024 bin ich nur zu 90% zufrieden, bei den anderen bin ich absolut zufrieden. Ändere ich sie aber so, das sie auch bei 1. perfekt aussieht, sind 2+3 nicht mehr optimal. Da es kein Allheilmittel gibt: was ist Eure Meinung, soll ich das so lassen? Die meisten werden ja wohl eher eine höhere Auflösung als 1280x1024 haben, oder? Oder gibt es viele mit Notebooks, die z.B. dann eben 1280x800 als Auflösung haben (die Breite ist ausschlaggeben, Höhe ist egal), Grüße Heiko

Hallo Heiko, ich würde mir in diesen Fall mal die Auswertung deiner Analyse Tools (Google Analytics oder Piwik) anschauen. Hier sollte auch dokumentiert sein mit welcher Bildschirmauflösung deine Benutzer unterwegs sind. Alternativ kannst du auch CSS3 Media Queries verwenden um den jeweiligen Bildschirmauflösungen eine optimierte Version deines Hintergrundbildes zur Verfügung zu stellen. Hat den Vorteil, dass du jede Version individuell ansprechen und steuern kannst. Der Nachteil an dieser Lösung ist dass du mehrere Versionen deines Bildes hoch laden musst und Media Queries werden erst ab Internet Explorer 9 unterstützt. Viele Grüße, Stephan Pohl :shopware:

1 Like

Vielen Dank für diese Tips, die werde ich „irgendwann mal“ auch umsetzen. Allerdings ist der Shop noch im Testbetrieb und nicht online-geschaltet - aber in Kürze. Daher gibt es auch keine Besucherzahlen. Im jetzigen 1&1-Shop Analytik noch umzusetzen, lohnt nicht oder ist fast unmöglich (mieses System). Daher wollte ich auch erstmal nur „Meinungen“ haben :wink: Kleine Nachfrage aber: wenn CSS3 Media Queries erst ab IE9 unterstützt werden - kann das dann zu Fehlern oder Poblemen mit älteren Browsern führen? Grüße - Heiko

Hallo Heiko, bei CSS3 Media Queries ist es so, dass du zu erst dein ganz normales CSS schreibst. Hier implementierst du eine Lösung, die für 1024px x 768px ausgelegt ist. Diese greift dann bei allen Browsern, die kein Media Query Support haben. Danach implementiert man die Media Queries für die jeweiligen Bildschirmauflösungen. Eine Beispielimplementierung würde ungefähr so aussehen: /\*\* Lösung für die Standardauflistung 1024x768 \*/ body { background: url("../images/bg\_regular.jpg") no-repeat fixed center center; } /\*\* Lösung für eine maximale Bildschirmbreite von 1920px \*/ @media screen and (max-width: 1920px) { body { background: url("../images/bg\_huge.jpg") no-repeat fixed center center; } } /\*\* Lösung für eine maximale Bildschirmbreite von 1680px \*/ @media screen and (max-width: 1680px) { body { background: url("../images/bg\_large.jpg") no-repeat fixed center center; } } /\*\* Lösung für eine maximale Bildschirmbreite von 1280px \*/ @media screen and (max-width: 1280px) { body { background: url("../images/bg\_big.jpg") no-repeat fixed center center; } } Es gibt zudem Javascript-Lösungen um einen Media Query Support auch für den Internet Explorer zu erhalten: http://code.google.com/p/css3-mediaqueries-js/ Viele Grüße, Stephan Pohl :shopware:

1 Like

Vielen Dank für diese kompetente Antwort! Das werde ich dann doch mal in Kürze umsetzen, sieht ja recht einfach aus und ermöglicht einem schöne Möglichkeiten.