body {
background-image: url(img.jpg);
background-position: center top;
background-size: 100% auto;
}CSS 100% width background image auto height
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.
