From eb57b61859f0e817220e6be40a51c27ebdc870b3 Mon Sep 17 00:00:00 2001
From: Andy Edinborough <andy@edinborough.org>
Date: Wed, 2 Jan 2013 13:45:58 -0600
Subject: [PATCH] backgroundPosition should use backgroundSize as a baseline
 for %'s

---
 src/Core.js  | 10 +++++-----
 src/Parse.js | 26 +++++++++++++-------------
 2 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/Core.js b/src/Core.js
index 69fd2da..3efa8a2 100644
--- a/src/Core.js
+++ b/src/Core.js
@@ -267,7 +267,7 @@ _html2canvas.Util.resizeBounds = function( current_width, current_height, target
   return { width: output_width, height: output_height };
 };
 
-function backgroundBoundsFactory( prop, el, bounds, image, imageIndex ) {
+function backgroundBoundsFactory( prop, el, bounds, image, imageIndex, backgroundSize ) {
     var bgposition =  _html2canvas.Util.getCSS( el, prop, imageIndex ) ,
     topPos,
     left,
@@ -287,7 +287,7 @@ function backgroundBoundsFactory( prop, el, bounds, image, imageIndex ) {
       percentage = (parseFloat(bgposition[0])/100);
       left = bounds.width * percentage;
       if(prop !== 'backgroundSize') {
-        left -= image.width*percentage;
+        left -= (backgroundSize || image).width*percentage;
       }
 
     } else {
@@ -315,7 +315,7 @@ function backgroundBoundsFactory( prop, el, bounds, image, imageIndex ) {
         percentage = (parseFloat(bgposition[1])/100);
         topPos =  bounds.height * percentage;
         if(prop !== 'backgroundSize') {
-          topPos -= image.height * percentage;
+          topPos -= (backgroundSize || image).height * percentage;
         }
 
       } else {
@@ -326,8 +326,8 @@ function backgroundBoundsFactory( prop, el, bounds, image, imageIndex ) {
     return [left, topPos];
 }
 
-_html2canvas.Util.BackgroundPosition = function( el, bounds, image, imageIndex ) {
-    var result = backgroundBoundsFactory( 'backgroundPosition', el, bounds, image, imageIndex );
+_html2canvas.Util.BackgroundPosition = function( el, bounds, image, imageIndex, backgroundSize ) {
+    var result = backgroundBoundsFactory( 'backgroundPosition', el, bounds, image, imageIndex, backgroundSize );
     return { left: result[0], top: result[1] };
 };
 _html2canvas.Util.BackgroundSize = function( el, bounds, image, imageIndex ) {
diff --git a/src/Parse.js b/src/Parse.js
index e005ebf..af8641a 100644
--- a/src/Parse.js
+++ b/src/Parse.js
@@ -555,28 +555,28 @@ _html2canvas.Parse = function (images, options) {
   }
 
   function renderBackgroundNoRepeat(ctx, image, backgroundPosition, x, y, w, h) {
-    var bgdw = w, // - backgroundPosition.left,
-    bgdh = h, // - backgroundPosition.top,
+    var bgdw = w - backgroundPosition.left,
+    bgdh = h - backgroundPosition.top,
     bgsx = backgroundPosition.left,
     bgsy = backgroundPosition.top,
     bgdx = backgroundPosition.left + x,
     bgdy = backgroundPosition.top + y;
 
     if (bgsx<0){
-      bgsx = Math.abs(bgsx);
+      bgsx = Math.abs( bgsx );
       bgdx += bgsx;
-      bgdw = Math.min(w,image.width-bgsx);
+      bgdw = Math.min( w, image.width - bgsx );
     } else {
-      bgdw = Math.min(bgdw,image.width);
+      bgdw = Math.min( bgdw, image.width );
       bgsx = 0;
     }
 
     if (bgsy < 0){
-      bgsy = Math.abs(bgsy);
+      bgsy = Math.abs( bgsy );
       bgdy += bgsy;
-      bgdh = Math.min(h, image.height - bgsy);
+      bgdh = Math.min( h, image.height - bgsy );
     } else {
-      bgdh = Math.min(bgdh, image.height);
+      bgdh = Math.min( bgdh, image.height );
       bgsy = 0;
     }
 
@@ -590,8 +590,8 @@ _html2canvas.Parse = function (images, options) {
         image.height,
         bgdx,
         bgdy,
-        bgdw,
-        bgdh
+        bgdw + backgroundPosition.left,
+        bgdh + backgroundPosition.top
         );
     }
   }
@@ -634,9 +634,9 @@ _html2canvas.Parse = function (images, options) {
   }
 
   function renderBackgroundRepeating(el, bounds, ctx, image, imageIndex) {
-    var backgroundPosition = _html2canvas.Util.BackgroundPosition(el, bounds, image, imageIndex),
-    backgroundRepeat = getCSS(el, "backgroundRepeat").split(","),
-    backgroundSize = _html2canvas.Util.BackgroundSize(el, bounds, image, imageIndex);
+    var backgroundSize = _html2canvas.Util.BackgroundSize(el, bounds, image, imageIndex),
+    backgroundPosition = _html2canvas.Util.BackgroundPosition(el, bounds, image, imageIndex, backgroundSize),
+    backgroundRepeat = getCSS(el, "backgroundRepeat").split(",");
 
     backgroundRepeat = backgroundRepeat[imageIndex] || backgroundRepeat[0];