2

I need to allocate some background image to a certain div, the thing is it needs to be positioned from right and not the usual left in CSS. So when defining background-position, it can read, say , right, or some big percentage (which is also calculated from the left side of the screen but anyway works) and.. that's it. I cannot use pixels and get it to go with a fix distance from the right side of its container. Am I right here? So, is there a work-around for this? Anything to do with LESS if that helps? Theoretically, I can have it set to right and somehow decrease a couple of pixels then.

We have margin-right:+-px, padding-right:+px, but not background-position-right:+-px ?

EdelAli
  • 109
  • 2
  • 8
  • Can't understand the down voting – vals May 08 '13 at 19:00
  • If you know before hand the dimensions of the div and the image, you can calculate a percentage that does that. see here: [http://stackoverflow.com/a/15044753/1926369]. the big percentage is not calculated from the left side !!! (neither from the right, it doesn't help much for your purposes, anyway) – vals May 08 '13 at 19:07

3 Answers3

3
background-position: right 20px;

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

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

UPDATE:

Oops, I may have misunderstood the question. The above positions the background image to the right side and 20px from the top--but not a set distance away from the right side. I don't think you can do that at this time with CSS alone.

For now what you could do is instead of using a background image on the element directly, wrap the element inside a wrapper div, then add a second div to hold the "background" image and position it absolutely--which you can do from the right a specific distance.

Example of the alternative option:

<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;
}
DA.
  • 39,848
  • 49
  • 150
  • 213
  • ... but that's not my answer probably, DA. By changing that 20px, your example is changing the image's vertical positioning rather than the horizontal left<>right one. – EdelAli May 08 '13 at 18:35
  • Yeah I now see, but I couldn't get it. Would you give me a CSS pattern of what you mean? – EdelAli May 08 '13 at 18:45
  • "I don't think you can do that at this time with CSS alone." You can, but 1) you must set more than 2 values so `right 20px` is considered the x offset, and 2) Chrome does not support this technique anyway, while all other browsers do. – BoltClock May 08 '13 at 18:54
  • You mean as Wilson Biggs has also said? Would you explain more on that? Maybe in an answer...? – EdelAli May 08 '13 at 19:01
3

The first value (calc(100% - 0%)) is the horizontal position and the second value (calc(100% - 10%)) is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%. . Default value is: 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 */  
}
Zihadul Islam
  • 31
  • 6
-1
<div id="background"></div>

and

#b {
height:100%;
width:100%;
background: ; //put background style here
}
W Biggs
  • 663
  • 1
  • 10
  • 18
  • There was this comment to DA.'s answer by BoltClock. "you must set more than 2 values so right 20px is considered the x offset". Do you also mean that? I'm not getting it anyway but I would try... – EdelAli May 08 '13 at 18:59