title: Position a background image outside an element using percent
body: <p>I don't know if it's the late hour or if I'm just being stupid, but I can't figure this out.</p>
  
  <p>What I'm trying to do is position a background image <em>just</em> 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".</p>
  
  <p>If I could use pixels it's easy enough to set the <code>background-position</code> to <code>[width-of-element]px 0</code> but as I want the element's final position to be <code>50% 0</code> I can't start with a pixel value. (I'm using the jQuery Background Position plugin btw <a href="http://keith-wood.name/backgroundPos.html" rel="nofollow">http://keith-wood.name/backgroundPos.html</a>).</p>
  
  <p>So, my question is, knowing the width of the element <em>and</em> the width of the background image - how can I calculate which %:age is needed to position the image <em>just</em> outside the edge of the element?</p>
  
  <p>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.</p>
  
  <p>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 <em>not</em> the same as the positive % needed to push it off the other edge.</p>
  
  <p>Again, maybe I'm just tired but I'm stuck here.</p>
  
  <p><a href="http://jsfiddle.net/cTeEA/" rel="nofollow">http://jsfiddle.net/cTeEA/</a></p>
  
  <p>Edit: Another curious thing I noticed is that if the image is <em>smaller</em> 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 <em>to the right</em>. Adjust the 101% on this updated fiddle and compare with the old fiddle to see what I mean: <a href="http://jsfiddle.net/cTeEA/1/" rel="nofollow">http://jsfiddle.net/cTeEA/1/</a></p>
  
  <p>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):</p>
  
  <pre><code>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 &gt; winWidth) ? -((imgWidth - winWidth) / 2) : ((winWidth - imgWidth) / 2);
  </code></pre>
  
  <p>Then I just animated the background-position from posOutside to posCenter.</p>
  
  <p>Thanks to those who helped in the comments as well.</p>