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