CSS3 Hintergrundbild automatisch skalieren

Author:
Kategorie:
HTML & CSS
Beitrag vom:
CSS background-size
CSS background-size

Mit CSS ein Background Image auf der vollen Bildschirmgröße hunderprozent skaliert anzeigen

Dank der neuen CSS3 Funktion background-size, ist es nun ganz einfach möglich das Hintergrundbild einer Webseite, immer hundertprozentig auf die volle Bildschirmgröße des Anzeigegerätes hin automatisch anpassen zu lassen.

body {
    background-image: url(css3-background-image.jpg);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-color: #000;
}

Mit diesem CSS3 Snippet bekommt der Besucher einer Webseite, ein perfekt skaliertes Hintergrundbild zu sehen, das sich der Bildschirmauflösung anpaßt. Auch bei einer Veränderung der Fenstergröße, bleibt das CSS Hintergrundbild immer prachtvoll anzuschauen.


Seite teilen

Der Beitrag: CSS3 Hintergrundbild automatisch skalieren, aus der Rubrik HTML & CSS hat dir gefallen?