Moderne Webseiten

Große Hintergrundbilder flexibel der Fenstergröße anpassen

Große, Browserfenster füllende Hintergrundbilder sind immer mehr im Kommen und durch die Einführung von hochauflösenden Displays (Retina) müssen sich Webentwickler in Zukunft verstärkt mit dem Einsatz großer Bilder in Webseiten auseinandersetzen.

Responsive Design für unterschiedliche Displaygrößen ist mittlerweile in aller Munde ich bin aber auch ein Fan von einfachem, flexiblem Webdesign, das sich stufenlos an die Displaygröße anpasst. In dem Zusammenhang sieht man des Öfteren Hintergrundbilder, die sich automatisch nach den Maßen des Browserfensters skaliern. Natürlich könnte man einfach ein Image mit der Weite und Höhe von 100% einbinden allerdings gibt es elegantere Methoden, bei denen das Hintergrundbild nicht verzerrt, sondern immer in Proportionen skaliert wird.

Bisher habe ich für diese Zwecke immer das jQuery Plugin Easy Background Resize verwendet, allerdings hat sich dadurch die Pageloadzeit spürbar erhöht.

Eine flüssigere und vor allem Resourcensparende Lösung habe ich auf CSS-Tricks gefunden.

Diese Methode basiert allein auf CSS und ist schnell implementiert.

body {
	overflow: hidden;
}
.resize-bg-image {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

Im HTML wird das Image mit der Klasse ‚resize-bg-image‘ nach dem öffnenden oder vor dem schließenden Body-Tag eingefügt. Um sicherzugehen, dass das Bild den Inhalt nicht überdeckt sollte man zusätzlich folgendes CSS einfügen.

.resize-bg-image {
	z-index: -1;
}

Ein Manko hat diese Lösung, denn für Seiten mit viel Inhalt eignet sie sich nicht. Dann fehlt einem die Scrollbar.

 

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Aktuelle Beiträge

Kontakt

Sie interessieren sich für eine Webseite, benötigen einen erfahrenen Enwtickler für Ihr Projekt oder haben allgemeine Fragen zu meinen Dienstleistungen?

HTML Mania – Moderne Webseiten
Impressum


® Made with WordPress