Comment définir la position d'arrière-plan fixe du côté droit en css?

Question

Dans ce cas

 li {background: url("../img/grey-arrow-next.png") no-repeat right center;
    border-bottom: 1px solid #D4E8EB}
 

Je veux 20px espace à droite avant de passer à l'image d'arrière-plan et je ne peux pas laisser de marge sur li car border devrait toucher les bords.

Il me faut donc régler 20px mais il faut 20px du côté gauche et non du côté droit.

 li {background: url("../img/grey-arrow-next.png") no-repeat 20px center;
        border-bottom: 1px solid #D4E8EB}
 

Answer 1

dans votre css, mentionnez la position à droite puis "valeur d'espacement (50px)", puis une autre position (centre / haut)

 li {background: url("../img/grey-arrow-next.png") no-repeat right 50px center;
border-bottom: 1px solid #D4E8EB}
 

Answer 2

Cela ne fonctionne pas sur tous les navigateurs, mais vous pouvez utiliser la fonction "calc" de CSS3:

exemple:

 background-position: calc(100% - 10px) center;
 

Answer 3

Il suffit d'ajouter un espace vide de 20 pixels sur le côté droit de l'image dans un éditeur graphique.

Answer 4

Vous pouvez utiliser un autre objet à l'intérieur de la balise li, et lui donner votre image de fond avec une marge à droite:

 li #image {
    margin-right: 20px;
    background: url(pp.jpg) no-repeat right center;
}

li {
    border: 1px solid #D4E8EB;
}
 

Answer 5

utilisez le code suivant pour ajouter 20 pixels à la droite de l'image d'arrière-plan -

 li {background: url("../img/grey-arrow-next.png") no-repeat right center;
border-bottom: 1px solid #D4E8EB; padding-right:20px}
 

utilisez le code suivant pour ajouter 20 pixels à la gauche de l'image d'arrière-plan -

 li {background: url("../img/grey-arrow-next.png") no-repeat right center;
border-bottom: 1px solid #D4E8EB; padding-left:20px}