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

2019 Mai 11 (12:09)

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?
javaguy 2019 Mai 12 (12:06)

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/

0 0 0
Noch keine Stimmen abgegeben
Durch die Nutzung dieser Website erklären Sie sich mit der Verwendung von Cookies einverstanden. Außerdem werden teilweise auch Cookies von Diensten Dritter gesetzt. Genauere Informationen finden Sie in unserer Datenschutzerklärung sowie im Impressum.