Centrare un’immagine di sfondo, usando i CSS

Voglio centrare un’immagine di sfondo. Non c’è alcun div usato, questo è lo stile CSS :

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

Il CSS sopra cade dappertutto e lo centra, ma metà dell’immagine non è vista, è solo una sorta di movimento verso l’alto. Quello che voglio fare è centrare l’immagine. Posso adottare l’immagine per visualizzare anche su uno schermo da 21 “?

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

Questo dovrebbe funzionare

In caso contrario, perché non creare un div con l’immagine e utilizzare z-index per renderlo lo sfondo? Questo sarebbe molto più facile da centrare rispetto a un’immagine di sfondo sul corpo.

Oltre a quello prova:

background-position: 0 100px;/*use a pixel value that will center it*/ O penso che puoi usare il 50% se hai impostato il tuo min-height corpo al 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%; } 

Io 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 è voluto:

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

Provare

 background-position: center center; 

C’è un errore nel tuo codice. Stai utilizzando un mix di syntax completa e notazione abbreviata sulla proprietà background-image. Ciò causa la non ripetizione da ignorare, poiché non è un valore valido per la proprietà background-image.

 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” dell’immagine, potresti voler dare un’occhiata alla risposta di questa domanda .

Prova questa 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 ‘STRICT’ html 4.01.

Aggiunta:

 background-attachment: fixed; 

Dovrebbe risolvere il problema

(Quindi Alessandro ha ragione)

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

Aveva lo stesso problema. Utilizzato le proprietà di visualizzazione e margine e ha funzionato.

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

semplicemente sostituire

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

con

 background:url(../images/images2.jpg) 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; } 

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

 margin: 0 auto