CSS3 im Detail: Background-Size

von

Die CSS3 im Detail-Reihe geht in die dritte Runde!

Im dritten Teil werden wir eine weitere Möglichkeit unter die Lupe nehmen, die es uns erlaubt background noch weiter zu manipulieren. Dabei soll es uns um das Ändern der Größe des Hintergrundes gehen. Kurz gesagt, wir reden über background-size.

Browserunterstützung

Folgende Browser unterstützen diese Technik bereits:

Firefox Safari Opera Chrome Internet Explorer

Syntax

Background-Size wird zwar von vielen Browsern unterstützt, allerdings hat jedes Programm noch seine eigene Implementierung mit eigener Syntax. Alle folgenden Anweisungen sind nötig, um background-size auf allen Browsern, sofern diese die Technik auch unterstützen, zum Laufen zu bringen.

1
2
3
4
5
div.bg_size {
	-moz-background-size:50% 25%; /* Firefox */
	-webkit-background-size:50% 25%; /* Safari, Chrome */
	background-size:50% 25%; /* Opera, IE, W3C Standard */
}

Die beiden Werte sind entweder Prozentangaben (prozentuale Breite und Höhe des Elements mit dem Hintergrund) oder Längenangaben in px, em oder sonstwas, dann gibt man direkt die Breite und Höhe des Hintergrundbildes an.

background-size:50% 25%

background-size:100px 10em

Neben diesen Möglichkeiten können wir aber auch noch zwischen den Schlüsselwerten contain und cover wählen. Contain skaliert das Bild so groß wie möglich aber noch so klein, dass es vollständig in das Element passt. Cover hingegen skaliert das Bild so klein es geht aber füllt das Element vollständig aus.

SafariDie nachfolgenden Anweisungen funktionieren nicht in Safari. Dieser nutzt noch eine alte Implementierung, die kein cover oder contain beinhaltet.

Update: Seit Version 5 (08.06.2010) besteht das Problem in Safari nicht mehr.

background-size:contain

background-size:cover

Fazit

An sich ist das eine schöne Sache aber die Implementierung ist noch nicht in allen modernen Browsern gleich.. von daher seh ich noch keinen wahnsinnig großen Vorteil. Es macht sicherlich Sinn, wenn man Vektorgrafiken als Hintergrundbilder benutzt, dann kann man diese wunderbar verlustlos skalieren. Für cover oder contain gibt es sicherlich mehr Anwendungsfälle, z.B. gibt es Seiten, die derzeit recht aufwändig versuchen ihr Hintergrundbild immer auf 100% Fensterbreite zu ziehen. Mit background-size:cover ist das jetzt kein Problem mehr.

Einmal müssen wir noch über Backgrounds reden, das nächste Mal geht’s nämlich um Background-Gradients, danach geht es dann mit Bordern weiter. ;)

Die hier könnten dich auch interessieren…

8 Kommentare RSS

Norman

Oh danke für die Ergänzung, hab ich noch gar nicht gewusst – cool. :)

Lastactionseo

Hallo Norman,

bei mir läuft das iergendwie nicht. Im Firefox bleibt mein Hintergrund gleich groß. Ich habe folgendes style :
body { background-image: url(background.jpg); background-size:100%; background-repeat:no-repeat; width: 100%; }
Auch wenn ich anstatt 100% contain oder cover eingäbe. Ich habe ein relativ großes Hintergrund (1280×960 px) und ein einziges Container für die Webseite. Wie kann das background die ganze Seite erfüllen, bei die unterschiedlichste Browsern? Danke für deine Hilfe im voraus :)

Norman

Hi Lastactionseo,
vermutlich hast du vergessen, dass du 3 Anweisungen brauchst, damit die Sache in möglichst vielen Browsern funktioniert. -moz-background-size für Firefox, -webkit-background-size für Chrome und Safari und schließlich background-size für Opera und IE9. Wenn du nur background-size benutzt, funktioniert es im Firefox nicht.
Hoffe, ich konnte dir weiterhelfen. :)

Webdesign, handcrafted « Bigbossdesign

[...] peinliche Bildbegrenzung sichtbar wird, sind diese Bilder recht groß und die CSS3-Eigenschaft background-size wird eingesetzt. Wir haben Dimensionen von 1900 x 1050 Pixeln. Diese Bilder könnten als [...]

kaiser

@Paul Bei Mischangaben aus auto und % macht FireFox nicht mit. Siehe Mozilla Spezifikationen.

Kommentieren