wake-up-neo.com

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

Ist es möglich, ein Hintergrundbild in einem div zu zentrieren? Ich habe so gut wie 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?

127
oompahloompah
#doit {
    background: url(url) no-repeat center;
}
260
Jake Lucas

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);

76
TimCodes.NET

Verwenden Sie die Hintergrundposition:

background-position: 50% 50%;
15
Capsule

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.

7
claytonkirlew

Das funktioniert bei mir:

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

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 .

4
Morteza Sadri

Das funktioniert bei mir:

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

Das funktioniert bei mir:

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