diff --git a/css/style.css b/css/style.css
index 62be2230..78615689 100644
--- a/css/style.css
+++ b/css/style.css
@@ -72,7 +72,7 @@ body {
 }
 
 .canvas-container .canvas-background {
-  background: url(../img/medium_canvas_background.png) repeat;
+  background: url(../img/canvas_background/medium_canvas_background.png) repeat;
   position: absolute;
   top: 0;
   right: 0;
@@ -80,6 +80,23 @@ body {
   left: 0;
 }
 
+.light-canvas-background .canvas-background {
+  background: url(../img/canvas_background/light_canvas_background.png) repeat;
+}
+
+.medium-canvas-background .canvas-background {
+  background: url(../img/canvas_background/medium_canvas_background.png) repeat;
+}
+
+.lowcont-medium-canvas-background .canvas-background {
+  background: url(../img/canvas_background/lowcont_medium_canvas_background.png) repeat;
+}
+
+.lowcont-dark-canvas-background .canvas-background {
+  background: url(../img/canvas_background/lowcont_dark_canvas_background.png) repeat;
+}
+
+
 .canvas.canvas-overlay {
   position: absolute;
   top: 0;
diff --git a/img/light_canvas_background.png b/img/canvas_background/light_canvas_background.png
similarity index 100%
rename from img/light_canvas_background.png
rename to img/canvas_background/light_canvas_background.png
diff --git a/img/canvas_background.png b/img/canvas_background/lowcont_dark_canvas_background.png
similarity index 100%
rename from img/canvas_background.png
rename to img/canvas_background/lowcont_dark_canvas_background.png
diff --git a/img/canvas_background/lowcont_medium_canvas_background.png b/img/canvas_background/lowcont_medium_canvas_background.png
new file mode 100644
index 00000000..3a21f204
Binary files /dev/null and b/img/canvas_background/lowcont_medium_canvas_background.png differ
diff --git a/img/medium_canvas_background.png b/img/canvas_background/medium_canvas_background.png
similarity index 100%
rename from img/medium_canvas_background.png
rename to img/canvas_background/medium_canvas_background.png
diff --git a/index.html b/index.html
index 67da5098..92403dbc 100644
--- a/index.html
+++ b/index.html
@@ -38,6 +38,15 @@
           <label for="show-grid">Show grid</label>
         </div>
       </div>
+      <div style="float: left; margin-top: 20px; color: #fff;">
+        Canvas background:
+        <select id="canvas-picker" style="width:100px;">
+          <option value="light-canvas-background">Light</option>
+          <option value="lowcont-medium-canvas-background">Medium - low contrast</option>
+          <option value="medium-canvas-background" selected="selected">Medium - high contrast</option>
+          <option value="lowcont-dark-canvas-background">Dark - low constrast</option>
+        </select>
+      </div>
     </div>
   </div>
 
diff --git a/js/piskel.js b/js/piskel.js
index 5ed585ae..04830f4f 100644
--- a/js/piskel.js
+++ b/js/piskel.js
@@ -70,6 +70,13 @@ $.namespace("pskl");
       $('body').tooltip({
         selector: '[rel=tooltip]'
       });
+
+      $('#canvas-picker').change(function(evt) {
+        $('#canvas-picker option:selected').each(function() {
+            console.log($(this).val());
+            $('html')[0].className = $(this).val();
+        });
+      });
     },
 
     render : function (delta) {