Come centrare un'immagine (di sfondo) all'interno di un div?


136

È possibile centrare un'immagine di sfondo in un div? Ho provato praticamente tutto, ma nessun successo:

<div id="doit">
  Lorem Ipsum ...
</div>

//CSS
#doit { background-image: url(images/pic.png); background-repeat: none; text-align: center; }

È possibile?

Risposte:


279
#doit {
    background: url(url) no-repeat center;
}

25
Grazie. Il CSS specifico per il centraggio è "background-position: center;"
pmont,

@Verde: vedi la mia risposta per le immagini di sfondo dello sprite.
Clayton,

3
Se vuoi che l'intero div venga riempito con l'immagine e non ci sia spazio extra che dovresti usare background-size: cover; Se vuoi che l'intera immagine venga mostrata senza che nessuna parte dell'immagine venga tagliata o allungata, vuoi usarebackground-size: contain;
Zlerp,

80

provare background-position:center;

EDIT: poiché questa domanda sta ottenendo molte visualizzazioni, vale la pena aggiungere alcune informazioni extra:

text-align: center non funzionerà perché l'immagine di sfondo non fa parte del documento e quindi non fa parte del flusso.

background-position:centerè una scorciatoia per background-position: center center; ( background-position: horizontal vertical);


in realtà hai solo bisognobackground-position:center;
Dave Sag

La risposta selezionata fa scomparire tutto il mio background per qualche motivo (per essere onesti sto facendo alcune cose jquery che potrebbero causarlo?), Ma questa risposta funziona. Upvote.
bwoogie,

15

Usa posizione di sfondo:

background-position: 50% 50%;

1
utile se hai bisogno di un'immagine centrata in orizzontale ma in alto in verticale: posizione di sfondo: 50% 0%;
Sébastien Gicquel,

Il 50% 0 è più corto di allora ;-) Nei CSS, non hai mai bisogno di alcuna unità quando il valore è 0
Capsule

8

Per centrare o posizionare l'immagine di sfondo è necessario utilizzare la background-positionproprietà. La proprietà background-position imposta la posizione iniziale di un'immagine di sfondo tope i leftlati dell'elemento. La sintassi CSS è background-position : xvalue yvalue;.

I valori supportati "xvalue" e "yvalue" sono unità di lunghezza come pxe nomi di percentuale e direzione come left, right ed ecc.

"Xvalue" è la posizione orizzontale dello sfondo e inizia dalla parte superiore dell'elemento. Significa che se lo usi 50pxsarà "50px" lontano dalla cima degli elementi. E "yvalue" è la posizione verticale che presenta le stesse condizioni.

Quindi se si utilizza background-position: center;l'immagine di sfondo verrà centrata.

Ma uso sempre questo codice:

.yourclass {
  background: url(image.png) no-repeat center /cover;
 }

So che è così confuso ma significa:

.yourclass {
  background-image: url(image.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

E so che anche questa background-sizeè una nuova proprietà e nel codice compresso ciò che è, /coverma questi codici significa filldimensionamento e posizionamento in background sullo sfondo del desktop di Windows.

È possibile visualizzare ulteriori dettagli su background-positiondi qui e background-sizedi qui .


7

Se l'immagine di sfondo è un foglio sprite allineato verticalmente, puoi centrare orizzontalmente ogni sprite in questo modo:

#doit {
    background-image: url('images/pic.png'); 
    background-repeat: none;
    background-position: 50% [y position of sprite];
}

Se l'immagine di sfondo è un foglio sprite allineato orizzontalmente, puoi centrare verticalmente ogni sprite in questo modo:

#doit {
    background-image: url('images/pic.png'); 
    background-repeat: none;
    background-position: [x position of sprite] 50%;
}

Se il tuo foglio sprite è compatto o non stai cercando di centrare l'immagine di sfondo in uno dei suddetti scenari, queste soluzioni non si applicano.


5

Questo funziona per me:

#doit{
    background-image: url('images/pic.png');
    background-repeat: no-repeat;
    background-position: center;  
}  

3

Questo funziona per me:

.network-connections-icon {
  background-image: url(url);
  background-size: 100%;
  width: 56px;
  height: 56px;
  margin: 0 auto;
}

1
margin: 0 auto;dove lo autofa centrare orizzontalmente all'interno del div. Grazie!
oyalhi,

1

Questo funziona per me:

<style>
   .WidgetBody
        {   
            background: #F0F0F0;
            background-image:url('images/mini-loader.gif');
            background-position: 50% 50%;            
            background-repeat:no-repeat;            
        }
</style>        

0

Questo funziona per me per allineare l'immagine al centro del div.

.yourclass {
  background-image: url(image.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.