diff --git a/src/demo/index.html b/src/demo/index.html
index c802520..957b90b 100644
--- a/src/demo/index.html
+++ b/src/demo/index.html
@@ -35,14 +35,14 @@
 		<hr/>
 		<label for="size">SIZE:</label>
 		<input id="size" type="range" value="400" min="100" max="1000" step="50" />
-		<label for="color">COLOR</label>
-		<input id="color" type="color" value="#333333" />
-		<label for="bg-color">BACKGROUND COLOR</label>
-		<input id="bg-color" type="color" value="#ffffff" />
+		<label for="fill">FILL</label>
+		<input id="fill" type="color" value="#333333" />
+		<label for="background">BACKGROUND</label>
+		<input id="background" type="color" value="#ffffff" />
 		<label for="text">CONTENT</label>
 		<textarea id="text">http://larsjung.de/qrcode/</textarea>
 		<hr/>
-		<label for="minversion">MINVERSION:</label>
+		<label for="minversion">MIN VERSION:</label>
 		<input id="minversion" type="range" value="6" min="1" max="10" step="1" />
 		<label for="eclevel">ERROR CORRECTION LEVEL</label>
 		<select id="eclevel">
@@ -69,10 +69,15 @@
 			<option value="4">4 - Image-Box</option>
 		</select>
 		<hr/>
+		<label for="msize">SIZE:</label>
+		<input id="msize" type="range" value="11" min="0" max="40" step="1" />
+		<label for="mposx">POS X:</label>
+		<input id="mposx" type="range" value="50" min="0" max="100" step="1" />
+		<label for="mposy">POS Y:</label>
+		<input id="mposy" type="range" value="50" min="0" max="100" step="1" />
+		<hr/>
 		<label for="label">LABEL</label>
 		<input id="label" type="text" value="jQuery.qrcode" />
-		<label for="fontsize">LABEL SIZE:</label>
-		<input id="fontsize" type="range" value="11" min="1" max="20" step="1" />
 		<label for="font">FONT NAME</label>
 		<input id="font" type="text" value="Ubuntu" />
 		<label for="fontcolor">FONT COLOR:</label>
@@ -80,8 +85,6 @@
 		<hr/>
 		<label for="image">IMAGE</label>
 		<input id="image" type="file" />
-		<label for="imagesize">IMAGE SIZE:</label>
-		<input id="imagesize" type="range" value="13" min="1" max="30" step="1" />
 	</div>
 
 	<img id="img-buffer" src="dummy.png" />
diff --git a/src/demo/scripts.js b/src/demo/scripts.js
index f91cb7f..a5692ef 100644
--- a/src/demo/scripts.js
+++ b/src/demo/scripts.js
@@ -6,8 +6,9 @@ var isOpera = Object.prototype.toString.call(window.opera) == '[object Opera]',
 		["minversion", ""],
 		["quiet", "modules"],
 		["radius", "%"],
-		["fontsize", "%"],
-		["imagesize", "%"]
+		["msize", "%"],
+		["mposx", "%"],
+		["mposy", "%"]
 	],
 
 	updateGui = function () {
@@ -27,8 +28,10 @@ var isOpera = Object.prototype.toString.call(window.opera) == '[object Opera]',
 				render: $("#render").val(),
 				ecLevel: $("#eclevel").val(),
 				minVersion: parseInt($("#minversion").val(), 10),
-				color: $("#color").val(),
-				bgColor: $("#bg-color").val(),
+
+				fill: $("#fill").val(),
+				background: $("#background").val(),
+
 				text: $("#text").val(),
 				size: parseInt($("#size").val(), 10),
 				radius: parseInt($("#radius").val(), 10) * 0.01,
@@ -36,13 +39,15 @@ var isOpera = Object.prototype.toString.call(window.opera) == '[object Opera]',
 
 				mode: parseInt($("#mode").val(), 10),
 
+				mSize: parseInt($("#msize").val(), 10) * 0.01,
+				mPosX: parseInt($("#mposx").val(), 10) * 0.01,
+				mPosY: parseInt($("#mposy").val(), 10) * 0.01,
+
 				label: $("#label").val(),
-				labelsize: parseInt($("#fontsize").val(), 10) * 0.01,
 				fontname: $("#font").val(),
 				fontcolor: $("#fontcolor").val(),
 
-				image: $("#img-buffer")[0],
-				imagesize: parseInt($("#imagesize").val(), 10) * 0.01
+				image: $("#img-buffer")[0]
 			};
 
 		$("#container").empty().qrcode(options);
diff --git a/src/jquery.qrcode.js b/src/jquery.qrcode.js
index 822f413..290cee9 100644
--- a/src/jquery.qrcode.js
+++ b/src/jquery.qrcode.js
@@ -79,16 +79,17 @@
 
 		drawBackgroundLabel = function (qr, context, settings) {
 
-			var font = "bold " + (settings.labelsize * settings.size) + "px " + settings.fontname,
+			var size = settings.size,
+				font = "bold " + (settings.mSize * size) + "px " + settings.fontname,
 				ctx = $('<canvas/>')[0].getContext("2d");
 
 			ctx.font = font;
 
 			var w = ctx.measureText(settings.label).width,
-				sh = settings.labelsize,
-				sw = w / settings.size,
-				sl = (1 - sw)/2,
-				st = (1 - sh)/2,
+				sh = settings.mSize,
+				sw = w / size,
+				sl = (1 - sw) * settings.mPosX,
+				st = (1 - sh) * settings.mPosY,
 				sr = sl + sw,
 				sb = st + sh,
 				pad = 0.01;
@@ -102,9 +103,8 @@
 			}
 
 			context.fillStyle = settings.fontcolor;
-			context.textAlign = "center";
 			context.font = font;
-			context.fillText($("#label").val(), 0.5 * settings.size, 0.5 * settings.size + 0.3 * settings.labelsize * settings.size);
+			context.fillText($("#label").val(), sl*size, st*size + 0.75 * settings.mSize * size);
 		},
 
 		drawBackgroundImage = function (qr, context, settings) {
@@ -112,10 +112,10 @@
 			var size = settings.size,
 				w = settings.image.naturalWidth || 1,
 				h = settings.image.naturalHeight || 1,
-				sh = settings.imagesize,
+				sh = settings.mSize,
 				sw = sh * w / h,
-				sl = (1 - sw)/2,
-				st = (1 - sh)/2,
+				sl = (1 - sw) * settings.mPosX,
+				st = (1 - sh) * settings.mPosY,
 				sr = sl + sw,
 				sb = st + sh,
 				pad = 0.01;
@@ -133,8 +133,10 @@
 
 		drawBackground = function (qr, context, settings) {
 
-			if (settings.bgColor) {
-				context.fillStyle = settings.bgColor;
+			if ($(settings.background).is('img')) {
+				context.drawImage(settings.background, 0, 0, settings.size, settings.size);
+			} else if (settings.background) {
+				context.fillStyle = settings.background;
 				context.fillRect(settings.left, settings.top, settings.size, settings.size);
 			}
 
@@ -270,8 +272,14 @@
 					fn(qr, context, settings, l, t, w, row, col);
 				}
 			}
-			context.fillStyle = settings.color;
-			context.fill();
+			if ($(settings.fill).is('img')) {
+				context.clip();
+				context.drawImage(settings.fill, 0, 0, settings.size, settings.size);
+				context.restore();
+			} else {
+				context.fillStyle = settings.fill;
+				context.fill();
+			}
 		},
 
 		// Draws QR code to the given `canvas` and returns it.
@@ -314,7 +322,7 @@
 
 				// some shortcuts to improve compression
 			var settings_size = settings.size,
-				settings_bgColor = settings.bgColor,
+				settings_bgColor = settings.background,
 				math_floor = Math.floor,
 
 				moduleCount = qr.moduleCount,
@@ -338,7 +346,7 @@
 					margin: 0,
 					width: moduleSize,
 					height: moduleSize,
-					'background-color': settings.color
+					'background-color': settings.fill
 				},
 
 				$div = $('<div/>').data('qrcode', qr).css(containerCSS);
@@ -399,11 +407,11 @@
 			// size in pixel
 			size: 200,
 
-			// code color
-			color: '#000',
+			// code color or image element
+			fill: '#000',
 
-			// background color, `null` for transparent background
-			bgColor: null,
+			// background color or image element, `null` for transparent background
+			background: null,
 
 			// content
 			text: 'no text',
@@ -422,13 +430,15 @@
 			// 4: image box
 			mode: 0,
 
+			mSize: 0.1,
+			mPosX: 0.5,
+			mPosY: 0.5,
+
 			label: 'no label',
-			labelsize: 0.1,
 			fontname: 'sans',
 			fontcolor: '#000',
 
-			image: null,
-			imagesize: 0.1
+			image: null
 		};
 
 	// Register the plugin