Responsive Hintergrundbilder

responsives Hintergrundbild

Möchte man ein Foto mit einem Motiv in den Hintergrund einer Website legen, so passt sich dieses nicht automatisch an die Bildschirmgröße an. Normalerweise legt man ein Bild mit einer festen Höhe und Breite über das background-Tag in den Hintergrund. Ohne weitere Angaben wird das Bild dann gekachelt (also nach rechts und unten wiederholt), wenn die Bildschirmanzeige größer als das Bild ist.

Die Lösung bringt die CSS-Eigenschaft background-size. Mit prozentualen Größenangaben (z.B. background-size: 100% 100% oder background-size: 100% auto) passt sich das Hintergrundbild zwar der Bildschirmgröße an, doch entweder wird es verzerrt oder Teile der Grafik beschnitten.

Mit dem Wert cover wird das Hintergrundbild so skaliert, dass es den Hintergrund vollständig ausfüllt.

Das CSS sieht so aus:

body {
    background: url(magnolia.jpg) no-repeat;
    background-size: cover;
 }

 

 

Kategorie

CSS