Wie zentriere ich ein (Hintergrund-) Bild innerhalb eines Div?

Ist es möglich, ein Hintergrundbild in einem Div zu zentrieren? Ich habe so ziemlich alles versucht - aber keinen Erfolg:

<div id="doit">
  Lorem Ipsum ...
</div>

//CSS
#doit { background-image: url(images/pic.png); background-repeat: none; text-align: center; }

Ist das möglich?

#doit {
    background: url(url) no-repeat center;
}

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 Flusses ist.

background-position:centerist eine Abkürzung für background-position: center center; ( background-position: horizontal vertical);

Hintergrundposition verwenden:

background-position: 50% 50%;

Zum Zentrieren oder Positionieren des Hintergrundbilds sollten Sie die background-positionEigenschaft verwenden. Die Eigenschaft Hintergrundposition legt die Startposition eines Hintergrundbilds von topund an den leftSeiten des Elements fest. Die CSS-Syntax lautet background-position : xvalue yvalue;.

Von "xvalue" und "yvalue" unterstützte Werte sind Längeneinheiten wie pxund Prozent- und Richtungsnamen wie left, right und etc.

Der "x-Wert" ist die horizontale Position des Hintergrunds und beginnt oben am Element. Wenn Sie es verwenden, ist 50pxes "50px" von der Oberseite der Elemente entfernt. Und "yvalue" ist die vertikale Position, die den gleichen Zustand hat.

Wenn Sie also background-position: center;Ihr Hintergrundbild verwenden, wird es 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 das background-sizeeine neue Eigenschaft ist und im komprimierten Code, was /coveraber diese Codes sind, bedeutet fillHintergrundgröße und Positionierung im Windows-Desktop-Hintergrund.

Sie können weitere Details sehen background-positionin hier und background-sizein hier .

Wenn es sich bei Ihrem Hintergrundbild um ein vertikal ausgerichtetes Sprite-Blatt handelt, 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 wie folgt vertikal zentrieren:

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

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

Das funktioniert bei mir:

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

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>