Comment déplacer une image d'arrière-plan avec css
-
19-09-2019 - |
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?
La solution
Vous pouvez utiliser la position de fond:
background-position: 8px 8px;
Autres conseils
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;
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;