Comment centrer une image (d'arrière-plan) dans un div?


136

Est-il possible de centrer une image d'arrière-plan dans un div? J'ai essayé à peu près tout - mais sans succès:

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

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

Est-ce possible?

Réponses:


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

25
Merci. Le CSS spécifique pour le centrage est "background-position: center;"
pmont

@Green: Voir ma réponse pour les images d'arrière-plan des sprites.
Clayton le

3
Si vous voulez que le div entier soit rempli avec l'image et sans espace supplémentaire, vous devez utiliser background-size: cover; Si vous voulez que l'image entière s'affiche sans qu'aucune partie de l'image ne soit coupée ou étirée, vous voulez utiliserbackground-size: contain;
Zlerp

80

essayer background-position:center;

EDIT: puisque cette question reçoit beaucoup de vues, il vaut la peine d'ajouter des informations supplémentaires:

text-align: center ne fonctionnera pas car l'image d'arrière-plan ne fait pas partie du document et ne fait donc pas partie du flux.

background-position:centerest un raccourci pour background-position: center center; ( background-position: horizontal vertical);


en fait, vous avez juste besoinbackground-position:center;
Dave Sag

La réponse sélectionnée fait disparaître tout mon arrière-plan pour une raison quelconque (pour être honnête, je fais des trucs jquery qui peuvent en être la cause?), Mais cette réponse fonctionne. Vote positif.
bwoogie

15

Utilisez background-position:

background-position: 50% 50%;

1
utile si vous avez besoin de l'image centrée horizontalement mais verticalement en haut: background-position: 50% 0%;
Sébastien Gicquel

50% 0 est plus court alors ;-) En CSS, vous n'avez jamais besoin d'unité lorsque la valeur est 0
Capsule

8

Pour centrer ou positionner l'image d'arrière-plan, vous devez utiliser la background-positionpropriété. La propriété background-position définit la position de départ d'une image d'arrière-plan à partir topet sur les leftcôtés de l'élément. La syntaxe CSS est background-position : xvalue yvalue;.

Les valeurs prises en charge "xvalue" et "yvalue" sont des unités de longueur telles pxque des noms de pourcentage et de direction tels que gauche, droite, etc.

La "valeur x" est la position horizontale de l'arrière-plan et commence à partir du haut de l'élément. Cela signifie que si vous l'utilisez, 50pxil sera à "50px" du haut des éléments. Et "yvalue" est la position verticale qui a la même condition.

Donc, si vous utilisez background-position: center;votre image de fond sera centrée.

Mais j'utilise toujours ce code:

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

Je sais que c'est tellement déroutant mais cela signifie:

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

Et je sais que c'est aussi background-sizeune nouvelle propriété et dans le code compressé ce qui est /covermais ces codes signifie le filldimensionnement et le positionnement de l'arrière-plan dans l'arrière-plan du bureau de Windows.

Vous pouvez voir plus de détails sur background-positionen ici et background-sizeen ici .


7

Si votre image d'arrière-plan est une feuille de sprite alignée verticalement, vous pouvez centrer horizontalement chaque sprite comme ceci:

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

Si votre image d'arrière-plan est une feuille de sprite alignée horizontalement, vous pouvez centrer verticalement chaque sprite comme ceci:

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

Si votre feuille de sprite est compacte ou si vous n'essayez pas de centrer votre image d'arrière-plan dans l'un des scénarios mentionnés ci-dessus, ces solutions ne s'appliquent pas.


5

Cela fonctionne pour moi:

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

3

Cela fonctionne pour moi:

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

1
margin: 0 auto;où le autofait centrer horizontalement dans le div. Je vous remercie!
oyalhi

1

Cela fonctionne pour moi:

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

0

Cela fonctionne pour moi pour aligner l'image au centre de div.

.yourclass {
  background-image: url(image.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.