[html] Comment centrer une image (arrière-plan) dans un div?


Answers

essayez l' background-position:center;

EDIT: comme cette question reçoit beaucoup de points de vue, il 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 l' background-position: center center ; ( background-position: horizontal vertical );

Question

Est-il possible de centrer une image d'arrière-plan dans un div? J'ai essayé à peu près tout - mais pas de 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?




Si votre image d'arrière-plan est une feuille de sprite alignée verticalement, vous pouvez centrer horizontalement chaque image-objet 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 image-objet 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 de fond dans l'un des scénarios susmentionnés, ces solutions ne s'appliquent pas.




Pour centrer ou positionner l'image d' background-position vous devez utiliser 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 top côtés top et left de l'élément. La syntaxe CSS est background-position : xvalue yvalue; .

Les valeurs prises en charge par "xvalue" et "yvalue" sont des unités de longueur comme px et des noms de pourcentage et de direction comme left, right et etc.

Le "xvalue" est la position horizontale de l'arrière-plan et commence à partir du haut de l'élément. Cela signifie que si vous utilisez 50px il sera "50px" loin 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 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 confus mais cela signifie:

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

Et je sais que aussi la background-size l' background-size est une nouvelle propriété et dans le code compressé ce qui est /cover mais ces codes signifie fill dimensionnement de l'arrière-plan et le positionnement dans le fond d'écran de Windows.

Vous pouvez voir plus de détails sur la background-position background-size here et la background-size here .




Cela fonctionne pour moi:

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





Related