background-size – Hintergrund Bildgrösse

Mit CSS3 ist die Eigenschaft background-size hinzugekommen. Wir haben nun die Möglichkeit, die Grösse von Hintergrundbildern durch CSS zu steuern.

Mögliche Werte der Eigenschaft sind die Größenangaben in Pixel, in Prozent, „contain“ oder „cover“ des darzustellenden Hintergrundbildes. Folgend jeweilige Einsatzbeispiele, wobei ich von einer zu belegenden Hintergrundfläche (hier ein div-Element) von 400px*400px ausgehe (Originalgrösse der Bilddatei 400px*100px, Seitenverhältnis 4:1):

Größenangaben in Pixel
background-size: 400px 100px; (Originalgrösse der Bilddatei)

Die erste Angabe bezeichnet die Breite (width) des Bildes in px, die zweite Angabe die Höhe (height) des Hintergrundbildes in px.

 

 
 

Ist der zweite Wert nicht angegeben wird hierfür automatisch der Wert „auto“ angenommen und der Wert so ermittelt, das das Bild im ursprünglichen Seitenverhältnis (also 4:1) dargestellt wird. Bei der Angabe von background-size: 200px wird der Wert für die Höhe automatisch ermittelt (hier also 50px). Man kann natürlich auch gleich beide Angaben der Werte machen, z. B. „200px auto“.

 

 

Größenangaben in Prozent
background-size: 50% 50%;

Der erste Wert bezeichnet die Breite (width) des Bildes in %, die zweite Angabe die Höhe (height) des Hintergrundbildes in %.

Allerdings wird bei der prozentualen Berechnung nicht von Grösse des Bildes ausgegangen, sondern von der Grösse des zu belegenden Hintergrundbereiches (hier: 400px*400px)!

background-size: 50% 50% von einer zu belegenden Fläche von 400px*400px entsprechen der darzustellenden Grösse des Hintergrundbildes von 200px*200px.

 

 

 

Natürlich kann man auch hier gleich beide Angaben der Werte machen, z. B. „75% auto“. Auch hier gilt, ist der zweite Wert aber nicht angegeben, wird dafür der Wert „auto“ angenommen. Allerdings wird hier dann wieder der Wert nach dem originalen Seitenverhältnis ermittelt. background-size: 75% von einer zu belegenden Fläche von 400px*400px ergebe den (width-)Wert von 300px. Der „fehlende“ Wert zu der Breite 300px im originalen Seitenverhältnis entspricht der darzustellenden Höhe von 75px.
 

 

 

Wenn man das originale Seitenverhältnis des Ursprungsfotos/-bildes unbedingt beibehalten möchte, empfiehlt sich immer, einen der beiden Wert mit „auto“ anzugeben, wenn man die exakte Grösse nicht kennt.

 
Größenangabe mit „contain“
background-size: contain;

Gibt man als Wert „contain“ an, wird der ganze auszufüllende Hintergrund so befüllt, wie es das Hintergrundbild unter Einbehaltung des originalen Seitenverhältnisses (hier 4:1) her gibt.

 

 

Größenangabe mit „cover“
background-size: cover;

Gibt man als Wert „cover“ an, wird der ganze auszufüllende Hintergrund befüllt, ohne dabei das originale Seitenverhältnisses zu beachten.

 

 
Die gleichen Effekte von „contain“ und „cover“ könnte man auch mit Prozentangaben erreichen, „contain“ z.B. mit „100% auto“, „cover“ mit „100% 100%“. (?) Genaue Tiefen der Unterschiede werde ich sicher noch ergründen.