Wie zentriert man ein Hintergrundbild in CSS perfekt?-CSS-Tutorial-php.cn

Wie zentriert man ein Hintergrundbild in CSS perfekt?

Mary-Kate Olsen

Freigeben： 2024-11-29 16:05:13

Original

125 Leute haben es durchsucht

How to Perfectly Center a Background Image in CSS?

Hintergrundbilder mit CSS zentrieren

Problem:

Hintergrundbilder lassen sich nur schwer präzise zentrieren . Mit dem bereitgestellten CSS-Code:

body{
    background-position:center;
    background-image:url(../images/images2.jpg) no-repeat;
}

Nach dem Login kopieren

Das Bild wird kachelt und ist zentriert, aber nur teilweise sichtbar. Ziel ist es, das Bild auch auf größeren Bildschirmen vollständig zu zentrieren.

Auflösung:

Um das Hintergrundbild richtig zu zentrieren, verwenden Sie die folgenden CSS-Eigenschaften:

background-image: url(path-to-file/img.jpg);
background-repeat:no-repeat;
background-position: center center;

Nach dem Login kopieren

background-repeat:no-repeat verhindert, dass das Bild angezeigt wird Kacheln.
Hintergrundposition: Mitte Mitte Zentriert das Bild horizontal und vertikal.

Alternativer Ansatz:

Erwägen Sie alternativ die Verwendung eines

Element mit dem Hintergrundbild und verwenden Sie die Z-Index-Eigenschaft, um es zum Hintergrund zu machen. Dieser Ansatz kann einfacher zu zentrieren sein als die Verwendung eines Hintergrundbilds auf dem Tag.

Zusätzliche Tipps:

Verwenden Sie einen Pixelwert für die Hintergrundposition, um eine präzise Zentrierung sicherzustellen.
Wenn Sie die eingestellt haben Mindesthöhe des Auf 100 % können Sie auch 50 % für die horizontale Hintergrundpositionierung verwenden.

Das obige ist der detaillierte Inhalt vonWie zentriert man ein Hintergrundbild in CSS perfekt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!