Screenshot der Webseite von FifthyThree Inc.
Die CSS3-Eigenschaft background-size ermöglicht es Bildern, die mittels CSS als Hintergrundbilder eingebunden wurden, diese unabhängig ihrer Ausmaße zu skalieren. Solch angelegte Hintergrundgrafiken können dann bspw. per CSS als Hintergrundbild dem body-Element zugewiesen werden, so dass sich die Grafik je nach Viewport und Ausrichtung den zur Verfügung stehenden Ausmaßen, wie in der ersten Abbildung von FifthyThree Inc. und deren Zeichenanwendung für das iPad, anpasst. Ein Gastbeitrag von Heiko Stiegert.
Grundsätzlich ist dies kein Verhalten was nicht schon bereits Anwendung findet, oftmals geschieht dies allerdings noch auf Basis von JavaScript. Wenn aufgrund der Zielgruppe die Möglichkeit vorliegt, auf ältere Browserversionen verzichten zu können, bietet die Eigenschaft background-size eine Möglichkeit dieses Verhalten ausschließlich mit CSS realisieren zu können. Wie dies gelöst werden kann, wird Bestandteil des heutigen CSS Tutorials sein.
Background-Size – CSS Syntax
CSS3 enthält verschiedene Hintergrundeigenschaften, die eine größere Kontrolle über das Hintergrundelement bieten. Dieses CSS Tutorial beschäftigt sich mit background-size, dessen Syntax wie folgt aussieht
body {
background: url(bg_backgroundsize-css-tutorial.jpg) no-repeat center center fixed;
}
Hierbei wird zuerst auf das Hintergrundbild referenziert, welches sich in diesem Fall nicht im Hintergrund wiederholen soll. Die Ausrichtung erfolgt horizontal und vertikal mittig und wird zudem an dieser Stelle fix ausgerichtet, so dass alle anderen darüber befindlichen Elemente darüber hinweg scrollen würden.
body {
background: url(bg_backgroundsize-css-tutorial.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Die Größe für eine solche Hintergrundgrafik kann in Pixel oder aber auch in Prozent angeben werden. In unserem Fall wird dieser Wert weggelassen, da sich die Hintergrundgrafik nicht in einem bestimmten Bereich, sondern vollständig ausdehnen soll. Mit dem Eigenschaftswert contain, passt unter Beibehaltung des Seitenverhältnisses, die größere Seite der Hintergrundgrafik in den Viewport. Das Bild wird auf die Länge und Breite skaliert, die die kürzeste Seite des Elements eines modernen Webdesigns besitzt. In diesem Fall die Höhe (siehe folgende Abbildung unten). Bei dem Wert cover hingegen, passt unter Beibehaltung des Verhältnisses der Seiten, die kleinere Seite der Hintergrundgrafik (ausschnittsweise immer) in den Viewport des Webseitenbesuchers. Das Hintergrundbild wird auf die längste Seite des Viewports sklaliert (siehe Abbildung 02).
Background-Size – cover vs. contain
Um den Unterschied zwischen den Werten cover & contain zu verdeutlichen, habe ich mit Erlaubnis des leipziger Fotografen Martin Neuhof, ein Foto seiner Serie “Leipzig Grünau” verwendet und diesem als Hintergrundgrafik diese beiden Werte zugewiesen.
Abb.01 background-size:cover (oben) vs. background-size:contain (unten)
Im oberen Teil der Abbildung 01, auf Basis des Wertes cover, wird die Hintergrundgrafik vollständig über die gesamte Breite des Viewports skaliert und in Bezug auf die Höhe der Hintergrundgrafik der mittlere Teil abgebildet. Im unteren Teil der Abbildung, auf Basis des Wertes contain, wird die im Hintergrund befindliche Grafik vollständig innerhalb des Viewports dargestellt, wobei sich die Darstellung an der kleinsten Seite des Browserfensters (in diesem Fall die Höhe) orientiert. So füllt die Hintergrundgrafik die Höhe des Viewports zwar aus, aber nicht die Breite. Somit ist dieser Wert für das gewünschte Verhalten nicht brauchbar. Der Wert cover hingegen, bringt wie die folgende Abbildung 02 mit zugegebenermaßen etwas übertriebenen Viewport-Darstellungen belegt (dient zum besserem Verständnis der Eigenschaft), das gewünschte Verhalten für Grafiken die sich im Hintergrund vollständig ausdehnen sollen (Fullsize Background-Images) mit.
Abb.02 mögliche Darstellungsvarianten von background-size:cover bei verschiedenen Viewportgrössen
Wer dieses Verhalten nun in natura sehen und das beschriebene Verhalten, der als Hintergrundgrafik angelegten Fotografie sehen möchte, dem kann ich folgenden Link zur Demoseite dieses CSS Tutorials zur CSS Eigenschaft background-size nur empfehlen:
Background-Size – Browser-Support
Die hier vorgestellte Eigenschaft wird von allen relevanten Browsern in Form ihrer aktuellsten Versionen durchweg unterstützt. Das heißt Webseitenbetreiber mit einer technik- oder design-affinen Zielgruppe, die größtenteils webkit- oder mozilla-basierte Browser verwenden, können diese CSS3 Eigenschaft getrost verwenden, weil die entsprechenden Browser dies bereits seit “Generationen” (Version) unterstützen. Das erfreuliche an der Entwicklung bezüglich dieser CSS3 Eigenschaft ist, dass auch der Internet Explorer mit Version 9 die Eigenschaft background-size korrekt umsetzt. Damit aber auch die älteren Versionen der angesprochenen Browser die Eigenschaft richtig umsetzen, benötigen diese noch die browser-spezifischen Präfixe (-webkit-, -moz-, …).
Browserunterstützung der CSS Eigenschaft background-size
Für diejenigen, die Webseitenbesucher mit älteren Browserversionen des Internet Explorers nicht “enttäuschen” wollen, können mittels JavaScript auch eine funktionsfähige Alternative anbieten. Interessante Ansätze sind u.a. die beiden jQuery-Plugins VEGAS oder SuperBGImage.
In diesem Sinne, viel Spaß mit CSS …
Über den Autoren
Der Autor dieses Artikels Heiko Stiegert arbeitet seit knapp 15 Jahren als Webentwickler und hat sich den Webstandards, der Zugänglichkeit, der Usability und der Suchmaschinenoptimierung von Webanwendungen verschrieben. Zudem veröffentlicht er Fachartikel in Zeitschriften wie dem Webstandards-Magazin (jetzt ScreenGuide), im “WebDesigner” oder aber schreibt Fachbücher wie “CSS-Design – Die Tutorials für Einsteiger” oder “Modernes Webdesign mit CSS – Schritt für Schritt zur perfekten Website”.
