Made background image resize correctly when zooming

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@870 eee81c28-f429-11dd-99c0-75d572ba1ddd

editor/svg-editor.css

@@ -23,6 +23,9 @@ body {
 
 #svg_editor #svgroot {
 	-moz-user-select: none;
+	position: absolute;
+	top: 0;
+	left: 0;
 }
 
 #svg_editor #svgcanvas {
@@ -601,6 +604,13 @@ span.zoom_tool {
 	color: #000;
 }
 
+#background_img {
+	position: absolute;
+	top: 0;
+	left: 0;
+	text-align: left;
+}
+
 #svg_source_editor button, #svg_docprops button {
 	padding: 5px 5px 7px 28px;
 	margin: 5px 20px 0 0;	
@@ -632,9 +642,6 @@ span.zoom_tool {
 #tool_source_cancel, #tool_docprops_cancel {
 	background: #E8E8E8 url(images/cancel.png) no-repeat 2px 0;
 }
-olor: black;
-	opacity: 0.6;
-}
 
 #tool_source_save, #tool_docprops_save {
 	background: #E8E8E8 url(images/save.png) no-repeat 2px 0;

editor/svg-editor.js

@@ -85,6 +85,15 @@ function svg_edit_setup() {
 		updateContextPanel();
 	};
 	
+	var updateBgImage = function() {
+		var bg_img = $('#background_img');
+		if(!bg_img.length) return;
+		var img = bg_img.find('img');
+		var zoomlevel = svgCanvas.getZoom();
+		img.width(zoomlevel*100 + '%');
+
+	}
+	
 	var zoomChanged = function(window, bbox) {
 		var scrbar = 15;
 		var res = svgCanvas.getResolution();
@@ -917,12 +926,20 @@ function svg_edit_setup() {
 		var bg_blk = $('#bg_blocks div.cur_background');
 		if(bg_blk.length) {
 			new_bg = bg_blk.css('background');
+			$('#svgcanvas').css('background',new_bg);
+			$('#background_img').remove();
 		} else if(bg_url) {
-			new_bg = '#FFF url("' + bg_url + '") no-repeat';
+			if(!$('#background_img').length) {
+				$('<div id="background_img"><img src="'+bg_url+'" style="width:100%"></div>')
+					.prependTo('#svgcanvas');
+			} else {
+				$('#background_img img').attr('src',bg_url);
+			}
 		} else {
 			new_bg = '#FFF';
-		}
 			$('#svgcanvas').css('background',new_bg);
+			$('#background_img').remove();
+		}
 		
 		hideDocProperties();
 	};
@@ -1561,8 +1578,7 @@ function svg_edit_setup() {
 		$('#canvas_height').val(h);
 
 		centerCanvasIfNeeded();
-		
-		var res = svgCanvas.getResolution();
+		setTimeout(updateBgImage,10);
 		
 		if(center) {
 			var w_area = $('#workarea');