Comment déplacer une image d'arrière-plan avec css

Question

Je voulais mettre une bordure autour d'une table qui a une image d'arrière-plan. La frontière fonctionne très bien, mais quand je le fais (il est une frontière de 8px) l'image de fond est coupé par la frontière. Suis-je capable de changer l'image d'arrière-plan pour commencer 8px à droite et 8px bas?

Answer 1

Vous pouvez utiliser la position de fond:

background-position: 8px 8px;

Answer 2

vous pouvez également utiliser une main courte.
background: <colour> <image url> <repeat> <left> <top> <scroll>

pour le vôtre, je voudrais penser quelque chose comme:
background : transparent url(<location to img>) no-repeat 8px 8px scroll;

Answer 3

Au lieu de déplacer manuellement l'image par 8px, vous devez simplement ancrer l'image à la boîte de remplissage ( vert dans le diagramme ci-dessous) au lieu de la zone frontalière ( jaune ). Faire cela placera le coin supérieur gauche de l'image à l'intérieur de la frontière au lieu de derrière.

background-origin: padding-box;

Cela rendra plus facile l'entretien car il fonctionne toujours même si vous changez la largeur de la bordure.

Vous pouvez également définir l'origine de l'arrière-plan de la zone de contenu ( bleu ):

background-origin: content-box;

Licencié sous: CC-BY-SA avec attribution

Non affilié à StackOverflow