Position a background image outside an element using percent [duplicate]

Question

This question already has answers here:

Using percentage values with background-position on a linear-gradient (2 answers)

Closed 2 years ago.

I don't know if it's the late hour or if I'm just being stupid, but I can't figure this out.

What I'm trying to do is position a background image just outside the element it belongs to using %. The reason I want to do is is so that I can later animate the background-position from this % to 50% having it "slide in".

If I could use pixels it's easy enough to set the background-position to [width-of-element]px 0 but as I want the element's final position to be 50% 0 I can't start with a pixel value. (I'm using the jQuery Background Position plugin btw http://keith-wood.name/backgroundPos.html).

So, my question is, knowing the width of the element and the width of the background image - how can I calculate which %:age is needed to position the image just outside the edge of the element?

Obviously setting the background position to "0 0" makes it render at the top left, "50% 0" makes it centered and "100% 0" positions it from the right edge. If I go above 100% it starts to move away from the right edge, and depending on the width of the image (and I guess, the element) any value from roughly 200 and up is needed to completely shove the background image outside the edge of the element.

If I go the other way around, from 0 and downward the image moves off to the right, again the % needed to hide it varies but is not the same as the positive % needed to push it off the other edge.

Again, maybe I'm just tired but I'm stuck here.

http://jsfiddle.net/cTeEA/

Edit: Another curious thing I noticed is that if the image is smaller than the containing element, increasing its background-position-x above 100% doesn't make it move away from the right instead it makes it move to the right. Adjust the 101% on this updated fiddle and compare with the old fiddle to see what I mean: http://jsfiddle.net/cTeEA/1/

Edit: Ok percentages seemed out of the question, or at least ten times harder than simply using pixels. Here's how I solved it (more or less):

var dir         = 'left'; // || 'right' (where to slide in the image from)
var winWidth    = $(document).width();
var imgWidth    = $('img[src="src-of-already-added-and-loaded-img.png"]').width();
var posOutside  = dir == 'right' ? '-' + imgWidth + 'px' : winWidth + 'px';
var posCenter   = (imgWidth > winWidth) ? -((imgWidth - winWidth) / 2) : ((winWidth - imgWidth) / 2);

Then I just animated the background-position from posOutside to posCenter.

Thanks to those who helped in the comments as well.

Answer 1

Background position with percentage values is not easy.

You can see an explanation of the math involved here

In your case, the short answer is:

The background size is greater or smaller than the div by a factor of f. Then your percentage is 100 / (1 - f).

That means that:

1. The backgound size is the same than the div. You are out of luck, it's not posible.
2. The background is bigger. Say div=100 background=400, then f = 4 and the formula gives -33%. (first example in demo)
3. The background is narrower. Say div=400 background=100, f=0.25 and the formula gives 133% (second example in the demo)

demo

Notice that in the demo the percentages are a little bit offset to show that the background is really there

css:

div.foo {
    width: 100px;
    background-size: 400px 100px;
    background: red url(http://placekitten.com/400/100) no-repeat 50% 0;
    height: 100px;
    background-position: -32% 0; /* Disappear to the left */
}

div.foo2 {
    width: 400px;
    background-size: 100px 100px;
    background: red url(http://placekitten.com/100/100) no-repeat 50% 0;
    height: 100px;
    background-position: 132% 0; /* Disappear to the left */
}