Position a background image outside an element using percent

Question

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.

Why not use jquery to get the width of the outer element (in pixel form). So you can use pixels in the css, instead of the percentages to put the image in the center of the element. var width = $('.foo').width(); center =width/2-1000; — npage, Jun 09 '13 at 01:30
If I use pixels to position it outside the element, then I'd need to use pixels to center it as well. Which now that I think of it might work... but I'm too tired to try now :P — powerbuoy, Jun 09 '13 at 01:54
Here is something I tried. I did a little bit of lazy stuff at the end. http://jsfiddle.net/cTeEA/3/ — npage, Jun 09 '13 at 01:55
You could use this on non supporting animation browsers because it is a little buggy if the user was to resize screen while it is animating then use css3 animations for modern browsers. Like this: http://jsfiddle.net/cTeEA/2/ — npage, Jun 09 '13 at 02:00
I don't think you can position an element out side of it's container unless you float it or use absolute positioning. — lockedown, Jun 09 '13 at 03:16
@lockedown you can, with negative margins, position absolute/relative and most likely other ways as well. I was asking about _background images_ though. — powerbuoy, Jun 09 '13 at 19:28

score 1 · Accepted Answer · edited May 23 '17 at 12:11

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:

The backgound size is the same than the div. You are out of luck, it's not posible.
The background is bigger. Say div=100 background=400, then f = 4 and the formula gives -33%. (first example in demo)
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 */
}

Thanks! I guess I'll try with px instead. Should be easy enough to center the image knowing both its, and the elements width. — powerbuoy, Jun 09 '13 at 16:56

Position a background image outside an element using percent

1 Answers1

demo