Comment déplacer une image de fond en css

Je voulais mettre une bordure autour d'une table qui a une image d'arrière-plan. La frontière fonctionne bien, mais quand je le fais (c'est un 8px frontière) l'image de fond est coupée par la frontière. Suis-je en mesure de déplacer l'image de fond pour démarrer 8px à droite et 8px bas?

InformationsquelleAutor Ankur | 2009-07-24
  1. 59

    Vous pouvez utiliser le background-position:

    background-position: 8px 8px;
    InformationsquelleAutor Nathan
  2. 14

    vous pourriez également utiliser une aiguille courte.

    background: <colour> <image url> <repeat> <left> <top> <scroll>

    pour le vôtre, je serais de penser quelque chose comme:

    background : transparent url(<location to img>) no-repeat 8px 8px scroll;

    • Pour être précis, le background-position première prend un xpos, qu'un ypos. Ainsi, il est <gauche> <top>, pas <top> <gauche>.
    InformationsquelleAutor schubySteve
  3. 0

    Plutôt que manuellement le décalage de l'image par 8px, vous devriez juste d'ancrage de l'image de la zone intérieure (vert dans le schéma ci-dessous) au lieu de la zone de bordure (jaune). Ceci vous permettra de placer le coin supérieur gauche de l'image à l'intérieur de la frontière au lieu de derrière elle.

    background-origin: padding-box;

    Cela permettra de rendre la maintenance plus facile, car il fonctionne même si vous modifiez la largeur de la bordure.

    Comment déplacer une image de fond en css

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

    background-origin: content-box;

    Documentation /Simple Démo @ MDN

    InformationsquelleAutor MarredCheese