web-dev-qa-db-fra.com

Comment centrer une image (de fond) dans une div?

Est-il possible de centrer une image de fond 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?

htmlcssimagebackgroundcenter
127
oompahloompah
#doit {
    background: url(url) no-repeat center;
}
260
Jake Lucas

essayez background-position:center;

EDIT: puisque cette question reçoit beaucoup de points de vue, cela vaut la peine d'ajouter quelques 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:center est un raccourci pour background-position: center center; (background-position: horizontal vertical);

76
TimCodes.NET

Utilisez background-position:

background-position: 50% 50%;
15
Capsule

Si votre image d'arrière-plan est une feuille de Sprite alignée verticalement, vous pouvez centrer chaque Sprite horizontalement de la manière suivante:

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

Si votre image de fond est une feuille de Sprite alignée horizontalement, vous pouvez centrer chaque Sprite verticalement de la manière suivante:

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

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

7
claytonkirlew

Cela fonctionne pour moi:

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

Pour centrer ou positionner l'image d'arrière-plan, utilisez la propriété background-position. La propriété background-position définit la position de départ d'une image d'arrière-plan à partir des côtés top et left de l'élément. La syntaxe CSS est background-position : xvalue yvalue;.

Les valeurs supportées par "xvalue" et "yvalue" sont des unités de longueur telles que px et des noms de pourcentage et de direction tels que gauche, droite, etc.

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

Donc, si vous utilisez background-position: center; votre image d'arrière-plan 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 aussi que le background-size est une nouvelle propriété et que, dans le code compressé, il s'agit de /cover, mais ces codes signifient fill la taille et le positionnement de l’arrière-plan dans le bureau de Windows.

Vous pouvez voir plus de détails sur background-position dans ici et background-size dans ici .

4
Morteza Sadri

Cela fonctionne pour moi:

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

Cela fonctionne pour moi:

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