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.

 

 
 
Weiterlesen