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

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?

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

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);

Utilisez background-position:

background-position: 50% 50%;

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 .

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.

Cela fonctionne pour moi:

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

Cela fonctionne pour moi:

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

Cela fonctionne pour moi:

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

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