Placez l'image d'arrière-plan 1em de la droite?

Question

Pour autant que je sache, il n'est pas possible de placer une image d'arrière-plan CSS 1em à partir de la bordure droite d'un bloc, il n'est pas non plus possible de placer une image 1em à partir du bas.

Le code suivant place l'image d'arrière-plan 1em à gauche et 2em à partir du haut.

<div class="foo" style="background: url('bar.png') no-repeat 1em 2em"> 
    Some text here 
</div> 

Est-il possible en CSS pour spécifier que l'image de fond doit être « loin du bord droit » si la taille de la boîte est dynamique et en supposant que vous ne pouvez pas modifier le code HTML?

(pourcentages ne fonctionnera pas, car la boîte peut changer la taille)

Si cela est impossible, quelle est la plus petite quantité de changement que vous devez faire le HTML?

Ceci est la solution de contournement je suis venu avec:

<style> 
div.background 
{ 
    float: right; 
    background: url('bar.png') no-repeat top left; 
    margin-right: 1em; 
    width: 16px; 
    height: 16px; 
} 
</style> 
<div class="foo"> 
    <div class="background" style="">&nbsp;</div> 
    Some text here 
</div> 

Answer 1

Après quelques recherches la longueur réelle x pixel de la position d'arrière-plan est toujours compté à partir du côté gauche de l'élément. La seule façon de faire ce travail (sans utiliser d'autres éléments) serait d'utiliser javascript, calculer la longueur gauche compte tenu des éléments largeur:

var rightMargin = "10"; // in pixels 
var imageWidth = "16"; 
var left = element.style.clientWidth - imageWidth - rightMargin; 

element.style.backgroundPosition = "0px " + left + "px"; 

Answer 2

Vous pouvez essayer quelque chose comme ceci:

<style type="text/css" media="screen"> 
    #outer { 
     position: relative; 
     top: -1em; 
     left: -1em; 
     margin: 1em 0 0 1em; 
     outline: thin solid #F00; 
     background: url(http://i.stackoverflow.com/Content/Img/stackoverflow-logo-250.png) no-repeat 100% 100%; 
    } 
    #inner { 
     outline: thin solid #0F0; 
     position: relative; 
     top: 1em; 
     left: 1em; 
    } 
</style> 

<div id="outer"> 
    <div id="inner"> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
    </div> 
</div> 

Edit: Dans l'attente de CSS 3 background-position.

Answer 3

Eléments avec la position: absolue; peut être positionné par leur bord droit. Donc, si cela ne vous dérange pas un changement mineur du html, faites ceci:

<div id="the-box"> 
    <img id="the-box-bg" src="bar.png" /> 
    Text text text text.... 
</div> 
(...) 
#the-box { 
    position: relative; 
} 
#the-box-bg { 
    position: absolute; 
    right: 1em; 
    z-index: -1; 
} 

Vous pouvez bien sûr utiliser également le positionnement absolu d'une seconde div, avec un fond répétitif. Mais alors vous devrez définir la taille de la div (interne) en CSS.

Answer 4

Le CSS3 background-position spec vous permet de changer le point d'ancrage de la partie supérieure gauche à tout ce que vous voulez. Par exemple, ce qui suit établira le coin inférieur bas de l'image 1em de droite et 2px du fond:

background-position: right 1em bottom 2px; 

Confirmed travailler dans:

IE9/10, Firefox 13+, Chrome 26+, Opera 11+, Seamonkey 2.14+, Lunascape 6.8.0

Depuis avril 2013, seuls les navigateurs IE6-8 et certains navigateurs marginaux manquent de support.

Voici une page de test: http://jsbin.com/osojuz/1/edit