Zentrieren eines Hintergrundbilds mithilfe von CSS

Ich möchte ein Hintergrundbild zentrieren. Es wird kein div verwendet, dies ist das CSS Stil:

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

Die obigen CSS-Kacheln sind überall und zentrieren sie, aber das halbe Bild wird nicht gesehen, es bewegt sich nur irgendwie nach oben. Ich möchte das Bild zentrieren. Könnte ich das Bild übernehmen, um es auch auf einem 21-Zoll-Bildschirm anzuzeigen?

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

Das sollte funktionieren.

Wenn nicht, warum nicht ein divBild mit dem Bild erstellen und z-indexes als Hintergrund verwenden? Dies wäre viel einfacher zu zentrieren als ein Hintergrundbild auf dem Körper.

Anders als dieser Versuch:

background-position: 0 100px;/*use a pixel value that will center it*/Oder ich denke, Sie können 50% verwenden, wenn Sie Ihren Körper min-heightauf 100% eingestellt haben.

body{

    background-repeat:no-repeat;
    background-position: center center;
    background-image:url(../images/images2.jpg);
    color:#FFF;
    font-family:Arial, Helvetica, sans-serif;
    min-height:100%;
}

Ich benutze diesen Code, es funktioniert gut

html, body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  background: black url(back2.png) center center no-repeat;;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Ich denke, das ist, was gewünscht wird:

body
{
    background-image:url('smiley.gif');
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center;
} 

Versuchen

background-position: center center;

So was:

background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Dore_woodcut_Divine_Comedy_01.jpg/481px-Dore_woodcut_Divine_Comedy_01.jpg);
background-repeat:no-repeat;
background-position: center;
background-size: cover;

html{
height:100%
}

body{
background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Dore_woodcut_Divine_Comedy_01.jpg/481px-Dore_woodcut_Divine_Comedy_01.jpg);
background-repeat:no-repeat;
background-position: center;
background-size: cover;
}

Ihr Code enthält einen Fehler. Sie verwenden eine Mischung aus vollständiger Syntax und Kurzschreibweise für die Eigenschaft "Hintergrundbild". Dadurch wird die Nichtwiederholung ignoriert, da dies kein gültiger Wert für die Eigenschaft "Hintergrundbild" ist.

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

Sollte eine der folgenden werden:

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

oder

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

BEARBEITEN: Bei Ihrem Problem mit der Bildskalierung sollten Sie sich die Antwort dieser Frage ansehen .

Versuche dies background-position: center top;

Dies wird den Trick für Sie tun.

background-repeat:no-repeat;
background-position:center center;

Zentriert das Hintergrundbild nicht vertikal, wenn ein HTML 4.01-Doctype 'STRICT' verwendet wird.

Hinzufügen:

background-attachment: fixed;

Sollte das Problem beheben

(Also hat Alexander recht)

einfach ersetzen

background-image:url(../images/images2.jpg) no-repeat;

mit

background:url(../images/images2.jpg)  center;

Wenn Sie mit den obigen Antworten nicht zufrieden sind, verwenden Sie diese

    * {margin: 0;padding: 0;}

    html
    {
        height: 100%;
    }

    body
    {
        background-image: url("background.png");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 80%;
    }

Hatte das gleiche Problem. Verwendete Anzeige- und Randeigenschaften und es hat funktioniert.

.background-image {
  background: url('yourimage.jpg') no-repeat;
  display: block;
  margin-left: auto;
  margin-right: auto;
  height: whateveryouwantpx;
  width: whateveryouwantpx;
}

background-position: center center;

funktioniert bei mir nicht ohne ...

background-attachment: fixed;

mit beiden zentrierte mein Bild auf der x- und y-Achse

background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;

Das einzige, was für mich funktioniert hat, ist ..

margin: 0 auto