Décalage d'une image de fond à partir de la droite à l'aide de CSS

Question

Est-il un moyen de placer une image de fond un certain nombre de pixels à partir de la droite de son élément?

Par exemple, pour la position de quelque chose d'un certain nombre de pixels (10) à partir de la gauche, c'est la façon dont je le ferais:

#myElement {
    background-position: 10px 0;
}

Answer 1

J'ai trouvé cette CSS3 fonctionnalité utile:

/* to position the element 10px from the right */
background-position: right 10px top;

Autant que je sache, ce n'est pas pris en charge dans IE8. Dans le dernier Chrome/Firefox, il fonctionne très bien.

Source utilisée: http://tanalin.com/en/blog/2011/09/css3-background-position/

Answer 2

Est-il un moyen de placer une image de fond un certain nombre de pixels à partir de la droite de son élément?

Nope.

Populaires comprennent des solutions de contournement

• la fixation d'un margin-right sur l'élément à la place
• l'ajout de pixels transparents de l'image elle-même et en le positionnant top right
• ou le calcul de la position à l'aide de jQuery après la largeur de l'élément est connu.

Answer 3

La solution la plus simple est d'utiliser des pourcentages. Ce n'est pas exactement la réponse que vous recherchez depuis que vous avez demandé au pixel près, de précision, mais si vous avez juste besoin de quelque chose pour avoir un peu de marge entre le bord droit de l'image, en donnant quelque chose d'une position de 99% fonctionne généralement assez bien.

Code:

/* aligns image to the vertical center and horizontal right of its container with a small amount of padding between the right edge */
div.middleleft {
  background: url("/images/source.jpg") 99% center no-repeat;
}

Answer 4

CSS3 a modifié la spécification de l' background-position afin qu'il fonctionne avec différents point d'origine. Malheureusement, je ne trouve pas de preuve qu'il est encore mis en œuvre dans tous les principaux navigateurs.

http://www.w3.org/TR/css3-background/#the-background-position Voir l'exemple 12.

background-position: right 3em bottom 10px;

Answer 5

Comme proposé ici, c'est une jolie croix-navigateur solution qui fonctionne parfaitement:

background: url('/img.png') no-repeat right center;
border-right: 10px solid transparent;

Je l'ai utilisé depuis le CSS3 fonction de la spécification de compensations proposées dans la réponse de la résolution de la question n'est pas pris en charge dans les navigateurs aussi bien. E. g.