Webentwicklung und mehr

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 Fenstergröß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 resourcensparende Lösung habe ich auf CSS-Tricks gefunden.

Diese Methode basiert allein auf CSS und ist schnell implementiert.

CSS für ein vollflächiges, absolut positioniertes Bild

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

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;
}

So lassen sich große Hintergrundbilder flexibel der Fenstergröße anpassen. 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