Startseite Skripte für das Wintersemester 2018/19 Webdesign Semantic Web CSS: Größe von Hintergrund-Bildern


CSS: Größe von Hintergrund-Bildern

Hat man (große) Hintergrundbilder, kann man entscheiden, ob diese in Originalgröße, skaliert oder sogar verzerrt dargestellt werden

CSS

div {
    background-image:url(p/spatzen.gif);
    background-repeat: no-repeat;

    /* Mitte des Bildes in Mitte des Divs */
    background-position: 50% 50%;

    /* füllt die zur Verfügung stehende Fläche komplett aus */
    background-size: cover;
}

Demo

Schaut Euch dazu die Demo an!