CSS 100% width background image auto height

0

CSS 100% width background image auto height

CSS3 Webdesign aus Duisburg Logo

CSS3 Webdesign aus Duisburg Logo

Das oben abgebildete CSS Code Snippet kann dafür gebraucht werden CSS Background skalierbar zu machen und so einen Responsive Webdesign Effekt zu nutzen. Auf Desktop Monitoren mit dicker Bandbreite ist das auch schön anzusehen, allerdings empfehle ich hier mehrere Bildversionen und den Einsatz von Media Queries. Damit das allerdings richtig rund läuft wäre es zusätzlich nötig den eigentlichen DIV-Container auch an die Größe des Bildes anzupassen. Aber hier ist große Vorsicht geboten, da sich Inhaltselemente nur ohne Inhalt an die Größe des Hintergrundbildes anpassen sollten. Sonst steht natürlich der eigentliche Content im Vordergrund. Hier kann ich nur mal wieder auf das stark vernachlässigte Mobile First hinweisen und in dem Zusammenhang auf den Artikel den Ferrari nicht schrotten.

RWD – Responsive Webdesign ist kompliziert

Ich werde zu dem Thema noch mehr bloggen, aber es muß Seitenbetreibern klar werden, daß man nicht mal eben eine Seite auf eine Spalte zusammendrücken und untereinander darstellen kann. Neben den Inhalten und den sehr schlechten Ladezeiten wird es auch immer wieder starke Probleme mit der Navigation geben. Für all diese Probleme müssen Specialcases und CSS-Hacks aufwendig implementiert werden. Dabei kann keine hohe Browserkompatibilität gewährleistet werden. Diese redundante Entwicklung ist nicht zielführend und sehr kostenintensiv.

About Author

PHP Kurs und Inhouse Schulungen für Webdevelopment mit Continuous Integration - Clean Coder, Blogger, Autor, Dozent und Senior Webdeveloper www.rolandgolla.de

Leave A Reply

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.