Wie zentriere ich ein (Hintergrund-) Bild in einem Div?

versuchen background-position:center;

BEARBEITEN: da diese Frage viele Aufrufe erhält, lohnt es sich, einige zusätzliche Informationen hinzuzufügen:

text-align: center funktioniert nicht, da das Hintergrundbild nicht Teil des Dokuments und daher nicht Teil des Ablaufs ist.

background-position:center steht für background-position: center center; (background-position: horizontal vertical);

Verwenden Sie die Hintergrundposition:

background-position: 50% 50%;

Wenn Ihr Hintergrundbild ein vertikal ausgerichtetes Sprite-Blatt ist, können Sie jedes Sprite wie folgt horizontal zentrieren:

#doit {
    background-image: url('images/pic.png'); 
    background-repeat: none;
    background-position: 50% [y position of Sprite];
}

Wenn Ihr Hintergrundbild ein horizontal ausgerichtetes Sprite-Blatt ist, können Sie jedes Sprite folgendermaßen vertikal zentrieren:

#doit {
    background-image: url('images/pic.png'); 
    background-repeat: none;
    background-position: [x position of Sprite] 50%;
}

Wenn Ihr Sprite-Arbeitsblatt kompakt ist oder Sie in einem der oben genannten Szenarien nicht versuchen, Ihr Hintergrundbild zu zentrieren, sind diese Lösungen nicht anwendbar.

Das funktioniert bei mir:

#doit{
    background-image: url('images/pic.png');
    background-repeat: no-repeat;
    background-position: center;  
}  

Um das Hintergrundbild zu zentrieren oder zu positionieren, sollten Sie die Eigenschaft background-position Verwenden. Die Eigenschaft background-position legt die Startposition eines Hintergrundbilds von den Seiten top und left des Elements fest. Die CSS-Syntax lautet background-position : xvalue yvalue;.

Die von "xvalue" und "yvalue" unterstützten Werte sind Längeneinheiten wie px und Prozent- und Richtungsnamen wie left, right und etc.

Der "x-Wert" ist die horizontale Position des Hintergrunds und beginnt am oberen Rand des Elements. Wenn Sie 50px Verwenden, bedeutet dies, dass der Abstand zum oberen Rand der Elemente "50px" beträgt. Und "yvalue" ist die vertikale Position, die die gleiche Bedingung hat.

Wenn Sie also background-position: center; Verwenden, wird Ihr Hintergrundbild zentriert.

Aber ich benutze immer diesen Code:

.yourclass {
  background: url(image.png) no-repeat center /cover;
 }

Ich weiß, dass es so verwirrend ist, aber es bedeutet:

.yourclass {
  background-image: url(image.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

Und ich weiß, dass auch background-size Eine neue Eigenschaft ist und im komprimierten Code, was /cover Ist, aber diese Codes bedeuten fill Hintergrundgröße und -positionierung im Windows-Desktop-Hintergrund.

Weitere Details zu background-position Finden Sie in hier und background-size In hier .

Das funktioniert bei mir:

.network-connections-icon {
  background-image: url(url);
  background-size: 100%;
  width: 56px;
  height: 56px;
  margin: 0 auto;
}

Das funktioniert bei mir:

<style>
   .WidgetBody
        {   
            background: #F0F0F0;
            background-image:url('images/mini-loader.gif');
            background-position: 50% 50%;            
            background-repeat:no-repeat;            
        }
</style>