diff --git a/javascript/src/Plugins/qfq.fabric.js b/javascript/src/Plugins/qfq.fabric.js
index 329f1616cd7a610008a6d29ccc2096d99a95bff0..f523ce1a0fe3da7897fd4e265c5969152a3f88a6 100644
--- a/javascript/src/Plugins/qfq.fabric.js
+++ b/javascript/src/Plugins/qfq.fabric.js
@@ -46,7 +46,7 @@ $(function (n) {
         this.selectionActive = false;
         this.dragAndDrop = false;
         this.dndData = '';
-        this.backgroundImage = '';
+        this.backgroundImage = false;
         this.fabricJSON = '';
         this.showObject = true;
         this.mouseInsideCanvas = false;
@@ -275,14 +275,20 @@ $(function (n) {
     };
 
     n.Fabric.prototype.prepareStaticCanvas = function(width, height) {
+        console.log("prepareStaticCanvas");
         this.generateStaticCanvas(width, height);
         if (this.fabricJSON) {
+            console.log("getFabric");
             this.canvas.loadFromJSON(this.fabricJSON);
         }
-        if (this.backgroundImage) {
-            this.setBackground(this.backgroundImage)
-        }
+        this.resizeCanvas();
+
+        var that = this;
 
+        setTimeout(function () {
+            that.resizeCanvas();
+            that.canvas.renderAll();
+        }, 1000);
     };
 
     n.Fabric.prototype.generateStaticCanvas = function(width, height) {
@@ -380,11 +386,29 @@ $(function (n) {
     };
 
     n.Fabric.prototype.resizeCanvas = function () {
+        console.log("resize canvas started");
+        var backgroundSizing = false;
+        var oldWidth = this.canvas.getWidth();
+        console.log("canvas: " + oldWidth);
+        var backgroundImageWidth = this.canvas.backgroundImage.width || 0;
+        console.log("bgimage: " + backgroundImageWidth);
+        if (oldWidth !== backgroundImageWidth && backgroundImageWidth !== 0) {
+            oldWidth = backgroundImageWidth;
+            backgroundSizing = true;
+        }
+        console.log("canvas oldWidth: " + oldWidth);
         var newWidth = this.parentElement.innerWidth();
-        if (newWidth != this.canvas.width) {
-            var scaleMultiplier = newWidth / this.canvas.width;
+        console.log("html: " + newWidth);
+        if (newWidth !== oldWidth) {
+            var scaleMultiplier = newWidth / oldWidth;
+            var oldHeight;
+            if (backgroundSizing) {
+                oldHeight = this.canvas.backgroundImage.height || 0;
+            } else {
+                oldHeight = this.canvas.getHeight();
+            }
             this.canvas.setWidth(this.parentElement.innerWidth());
-            this.canvas.setHeight(this.canvas.getHeight() * scaleMultiplier);
+            this.canvas.setHeight(oldHeight * scaleMultiplier);
             var objects = this.canvas.getObjects();
             for (var i in objects) {
                 objects[i].scaleX = objects[i].scaleX * scaleMultiplier;
@@ -411,10 +435,10 @@ $(function (n) {
         this.canvas.renderAll();
     };
 
-    n.Fabric.prototype.setBackground = function (imagePath) {
-        if (imagePath) {
+    n.Fabric.prototype.setBackground = function () {
+        if (this.backgroundImage) {
              var that = this;
-             fabric.Image.fromURL(imagePath, function(img) {
+             fabric.Image.fromURL(this.backgroundImage, function(img) {
                  img.set({
                      width: that.canvas.width,
                      height: that.canvas.height,