Comment déplacer une image d'arrière-plan avec CSS
Je voulais mettre une bordure autour d'une table qui a une image de fond. La bordure fonctionne bien, mais quand je fais cela (c'est une bordure de 8 pixels), l'image d'arrière-plan est coupée par la bordure. Suis-je capable de décaler l'image d'arrière-plan pour commencer 8 pixels vers la droite et 8 pixels vers le bas?
Vous pouvez utiliser la position d'arrière-plan:
background-position: 8px 8px;
vous pouvez également utiliser une main courte.background: <colour> <image url> <repeat> <left> <top> <scroll>
pour le vôtre, je penserais à quelque chose comme:background : transparent url(<location to img>) no-repeat 8px 8px scroll;
Plutôt que de déplacer manuellement l'image de 8px, vous devez simplement ancrer l'image à la zone de remplissage ( verte dans le diagramme ci-dessous) au lieu de la zone de bordure ( jaune ). Faire cela placera le coin supérieur gauche de l'image à l'intérieur de la bordure au lieu de derrière.
background-Origin: padding-box;
Cela facilitera la maintenance, car il fonctionnera même si vous modifiez la largeur de la bordure.
Vous pouvez également définir l'origine de l'arrière-plan dans la zone de contenu ( bleu ):
background-Origin: content-box;