CSS position de fond calculée à partir de la gauche? Je le veux DROIT

Question

J'ai besoin d'allouer une image d'arrière-plan à un certain div, la chose est qu'il doit être positionné à droite et pas la gauche habituelle en CSS. Ainsi, lors de la définition background-position, il peut lire, dire, à droite, ou un grand pourcentage (qui est également calculé à partir du côté gauche de l'écran, mais fonctionne de toute façon) et .. c'est tout. Je ne peux pas utiliser les pixels et l'obtenir avec une distance fixe du côté droit de son conteneur. Suis-je ici? Alors, y a-t-il une solution pour cela? Quelque chose à faire avec moins si cela aide? Théoriquement, je peux l'avoir réglé à droite et en quelque sorte diminuer un couple de pixels alors.

Nous avons des margin-right: + - px, padding-right: + px, mais pas background-position-right: + - px?

Answer 1

background-position: right 20px; 

https://developer.mozilla.org/en-US/docs/CSS/background-position

exemple JSBIN: http://jsbin.com/ixejey/1/

MISE À JOUR:

Oops, j'ai mal compris la question. Ce qui précède positionne l'image de fond sur le côté droit et 20px du haut, mais pas à une distance définie du côté droit. Je ne pense pas que vous pouvez le faire en ce moment avec CSS seul. Pour l'instant, ce que vous pouvez faire est d'utiliser directement une image de fond sur l'élément, d'envelopper l'élément dans un div wrapper, puis d'ajouter un second div pour conserver l'image "background" et la positionner absolument. peut faire à partir de la droite une distance spécifique.

Exemple de l'option alternative:

<div id="yourContainer"> 
    <div id="yourBackGroundImage"></div> 
    <div id="yourContent">your content</div> 
</div> 

css:

#yourContainer { 
    position: relative; 
} 

#yourBackGroundImage { 
    width: 100; 
    height: 100; 
    position: absolute; 
    right: 50px; 
} 

Answer 2

<div id="background"></div> 

et

#b { 
height:100%; 
width:100%; 
background: ; //put background style here 
} 

Answer 3

La première valeur (calc (100% - 0%) est le horiz la position ontale et la deuxième valeur (calc (100% - 10%)) est la verticale. Le coin supérieur gauche est 0% 0%. Le coin inférieur droit est 100% 100%. Si vous spécifiez seulement une valeur, l'autre valeur sera de 50%. . Valeur par défaut est: 0% 0%

<div id="hero-content"></div> 

CSS

#hero-content{ 
    background-position: 
    calc(100% - 0%) /* 0px from the right */ 
    calc(100% - 10%) /* 10% from the bottom */ 
}