Background-size

Die CSS3-Eigenschaft background-size spezifiziert die Grösse des Hintergrundbildes. Bildgrössen können in Pixel oder Prozent definiert werden. Werden die Angaben in % gemacht, beziehen sie sich auf die Breite und Höhe des Elternelementes. Bilder die nun Fullscreen im Background skalieren sind in allen neuen Browsern implementiert.

Syntax

% oder PX
background-size: Werte können in Prozent oder in Pixeln angegeben werden. auto übernimmt die Maße der Grafik, proportional zur angegeben Grösse. Kombinationen sind die Regel.

background-size: 400px;
background-size: 100% 200px;
background-size: auto 200px;
background-size: 50% 25%;

cover oder contain
background-size: cover;
passt die Grafik proportinal dem Anzeigebereich an.
background-size: contain;
skaliert das Bild so groß wie möglich aber so, dass es vollständig in das Eltern Element passt.

Borwser

Opera, Webkit (Safari, Chrome) und Mozilla (Firefox) Browser benötigen keine Browser-Präfix ( -moz-background-size: cover;) mehr.

IE interpretiert background-size ab Version 9+.
für älter IE Versionen wird ein filter forgeschlagen. Leider hat er bei mir nie funktioniert.

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='images/IMG_1129.JPG',sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='images/IMG_1129.JPG',sizingMethod='scale')";

Beispiele

background: url(help.gif) no-repeat bottom left;
background-size: 100%  100%;

background:  url(help.gif) no-repeat center center;
background-size: auto 100px;

background: url(help.gif) no-repeat top left;
background-size: cover;

background:  url(help.gif) no-repeat center center;
background-size: contain;