Wie kann ich ein Hintergrundbild mit CSS in einem div zentrieren?

Ich würde gerne ein Bild in einem div zentrieren (horizontal und vertikal):

div#test {
    width: 100%;
    height: 100%;
    background-position:center;
    background-image:url(test.jpg) no-repeat;
}

Das CSS sollte eigentlich syntaktisch korrekt sein, trotzdem funktioniert es nicht wie gewünscht:

  • Wie mache ich das div Element auf die 100% Höhe des Browserfensters?
  • Wie zeige ich in dem div ein background image, horizontal und vertikal zentriert?
Noch keine Stimmen abgegeben
Noch keine Kommentare
  • 12 Mai 2019

    Das CSS ist von der Syntax nicht ganz richtig: für "no-repeat" gibt es eine eigene Property:

    background-repeat: no-repeat;
    

    Um ein div Element auf die 100% des Browserfensters anzuzeigen geht mit:

    height:100vh;
    

    Dabei ist vh viewport height

    Aber eigentlich sollte das auch mit 100% funktionieren, vorausgesetzt das body Element ist auch auf height: 100% gesetzt.

    Hier eine funktionierende Lösung: https://jsfiddle.net/ta6wrcL1/

    Noch keine Stimmen abgegeben
    Noch keine Kommentare