Centrare un'immagine di sfondo, usando CSS

Voglio centrare un'immagine di sfondo. Non viene utilizzato div, questo è lo stile CSS :

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

Le tessere CSS sopra sono ovunque e la centrano, ma metà dell'immagine non viene vista, si sposta semplicemente verso l'alto. Quello che voglio fare è centrare l'immagine. Potrei adottare l'immagine per vederla anche su uno schermo da 21 "?

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

Dovrebbe funzionare.

In caso contrario, perché non creare un'immagine divcon e utilizzarla z-indexper renderla di sfondo? Questo sarebbe molto più facile da centrare di un'immagine di sfondo sul corpo.

A parte questo, prova:

background-position: 0 100px;/*use a pixel value that will center it*/Oppure penso che puoi usare il 50% se hai impostato il tuo corpo min-heightal 100%.

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%;
}

Uso questo codice, funziona bene

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

Penso che questo sia ciò che si desidera:

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

Provare

background-position: center center;

Come questo:

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

C'è un errore nel tuo codice. Stai utilizzando un mix di sintassi completa e notazione abbreviata sulla proprietà dell'immagine di sfondo. Questo sta causando l'ignoramento della non ripetizione, poiché non è un valore valido per la proprietà dell'immagine di sfondo.

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

Dovrebbe diventare uno dei seguenti:

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

o

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

EDIT: per il problema del ridimensionamento delle immagini, potresti voler esaminare la risposta a questa domanda .

Prova questo background-position: center top;

Questo farà il trucco per te.

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

Non centra verticalmente l'immagine di sfondo quando si utilizza un doctype html 4.01 'STRICT'.

Aggiunta:

background-attachment: fixed;

Dovrebbe risolvere il problema

(Quindi Alexander ha ragione)

semplicemente sostituire

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

con

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

se non sei soddisfatto delle risposte sopra, usa questo

    * {margin: 0;padding: 0;}

    html
    {
        height: 100%;
    }

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

Ho avuto lo stesso problema. Usato display e proprietà dei margini e ha funzionato.

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

background-position: center center;

non funziona per me senza ...

background-attachment: fixed;

usando sia centrata la mia immagine sull'asse xey

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

L'unica cosa che ha funzionato per me è ...

margin: 0 auto