diff --git a/src/draw_grid.js b/src/draw_grid.js
index 2454ac4..df84992 100644
--- a/src/draw_grid.js
+++ b/src/draw_grid.js
@@ -3,22 +3,22 @@ module.exports = function (opts, cy, debounce) {
     var options = opts;
 
     var changeOptions = function (opts) {
-      options = opts;
+        options = opts;
     };
 
-    var offset = function(elt) {
+    var offset = function (elt) {
         var rect = elt.getBoundingClientRect();
 
         return {
-          top: rect.top + document.documentElement.scrollTop,
-          left: rect.left + document.documentElement.scrollLeft
+            top: rect.top + document.documentElement.scrollTop,
+            left: rect.left + document.documentElement.scrollLeft
         }
     };
 
     var $canvas = document.createElement('canvas');
     var $container = cy.container();
-    var ctx = $canvas.getContext( '2d' );
-    $container.appendChild( $canvas );
+    var ctx = $canvas.getContext('2d');
+    $container.appendChild($canvas);
 
     var resetCanvas = function () {
         $canvas.height = 0;
@@ -31,19 +31,19 @@ module.exports = function (opts, cy, debounce) {
 
     resetCanvas();
 
-    var drawGrid = function() {
+    var drawGrid = function () {
         var zoom = cy.zoom();
         var canvasWidth = cy.width();
         var canvasHeight = cy.height();
-        var increment = options.gridSpacing*zoom;
+        var increment = options.gridSpacing * zoom;
         var pan = cy.pan();
-        var initialValueX = pan.x%increment;
-        var initialValueY = pan.y%increment;
+        var initialValueX = pan.x % increment;
+        var initialValueY = pan.y % increment;
 
         ctx.strokeStyle = options.gridColor;
         ctx.lineWidth = options.lineWidth;
 
-        var data = '\t<svg width="'+ canvasWidth + '" height="'+ canvasHeight + '" xmlns="http://www.w3.org/2000/svg">\n\
+        var data = '\t<svg width="' + canvasWidth + '" height="' + canvasHeight + '" xmlns="http://www.w3.org/2000/svg">\n\
             <defs>\n\
                 <pattern id="horizontalLines" width="' + increment + '" height="' + increment + '" patternUnits="userSpaceOnUse">\n\
                     <path d="M ' + increment + ' 0 L 0 0 0 ' + 0 + '" fill="none" stroke="' + options.gridColor + '" stroke-width="' + options.lineWidth + '" />\n\
@@ -52,29 +52,30 @@ module.exports = function (opts, cy, debounce) {
                     <path d="M ' + 0 + ' 0 L 0 0 0 ' + increment + '" fill="none" stroke="' + options.gridColor + '" stroke-width="' + options.lineWidth + '" />\n\
                 </pattern>\n\
             </defs>\n\
+            <rect width="100%" height="100%"  fill="' + options.gridBackgroundColor + '" />\n\
             <rect width="100%" height="100%" fill="url(#horizontalLines)" transform="translate('+ 0 + ', ' + initialValueY + ')" />\n\
             <rect width="100%" height="100%" fill="url(#verticalLines)" transform="translate('+ initialValueX + ', ' + 0 + ')" />\n\
         </svg>\n';
 
         var img = new Image();
         data = encodeURIComponent(data);
-        
+
         img.onload = function () {
             clearDrawing();
             ctx.drawImage(img, 0, 0);
         };
-        
+
         img.src = "data:image/svg+xml," + data;
     };
-    
-    var clearDrawing = function() {
+
+    var clearDrawing = function () {
         var width = cy.width();
         var height = cy.height();
 
-        ctx.clearRect( 0, 0, width, height );
+        ctx.clearRect(0, 0, width, height);
     };
 
-    var resizeCanvas = debounce(function() {
+    var resizeCanvas = debounce(function () {
         $canvas.height = cy.height();
         $canvas.width = cy.width();
         $canvas.style.position = 'absolute';
@@ -82,7 +83,7 @@ module.exports = function (opts, cy, debounce) {
         $canvas.style.left = 0;
         $canvas.style.zIndex = options.gridStackOrder;
 
-        setTimeout( function() {
+        setTimeout(function () {
             $canvas.height = cy.height();
             $canvas.width = cy.width();
 
@@ -91,7 +92,7 @@ module.exports = function (opts, cy, debounce) {
             $canvas.style.top = -(canvasBb.top - containerBb.top);
             $canvas.style.left = -(canvasBb.left - containerBb.left);
             drawGrid();
-        }, 0 );
+        }, 0);
 
     }, 250);
 
diff --git a/src/index.js b/src/index.js
index 81474f6..671f904 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,9 +1,10 @@
-;(function(){ 'use strict';
+; (function () {
+	'use strict';
 
 	// registers the extension on a cytoscape lib ref
-	var register = function(cytoscape){
+	var register = function (cytoscape) {
 
-		if(!cytoscape){ return; } // can't register if cytoscape unspecified
+		if (!cytoscape) { return; } // can't register if cytoscape unspecified
 		require("./extend");
 
 		// flag that indicates if extension api functions are registed to cytoscape
@@ -32,7 +33,8 @@
 			zoomDash: true, // Determines whether the size of the dashes should change when the drawing is zoomed in and out if grid is drawn.
 			panGrid: false, // Determines whether the grid should move then the user moves the graph if grid is drawn.
 			gridStackOrder: -1, // Namely z-index
-			gridColor: '#dedede', // Color of grid lines
+			gridBackgroundColor: '#fff', // Color for grid background
+			gridColor: "#dedede", // color for grid lines
 			lineWidth: 1.0, // Width of grid lines
 			guidelinesStackOrder: 4, // z-index of guidelines
 			guidelinesTolerance: 2.00, // Tolerance distance for rendered positions of nodes' interaction.
@@ -66,13 +68,13 @@
 
 		function getScratch(cy) {
 			if (!cy.scratch("_gridGuide")) {
-				cy.scratch("_gridGuide", { });
+				cy.scratch("_gridGuide", {});
 			}
 
 			return cy.scratch("_gridGuide");
 		}
 
-		cytoscape( 'core', 'gridGuide', function(opts){
+		cytoscape('core', 'gridGuide', function (opts) {
 			var cy = this;
 
 			// access the scratch pad for cy
@@ -114,22 +116,22 @@
 			}
 
 			return this; // chainability
-		} ) ;
+		});
 
 	};
 
-	if( typeof module !== 'undefined' && module.exports ){ // expose as a commonjs module
+	if (typeof module !== 'undefined' && module.exports) { // expose as a commonjs module
 		module.exports = register;
 	}
 
-	if( typeof define !== 'undefined' && define.amd ){ // expose as an amd/requirejs module
-		define('cytoscape-grid-guide', function(){
+	if (typeof define !== 'undefined' && define.amd) { // expose as an amd/requirejs module
+		define('cytoscape-grid-guide', function () {
 			return register;
 		});
 	}
 
-	if( typeof cytoscape !== 'undefined' ){ // expose to global cytoscape (i.e. window.cytoscape)
-		register( cytoscape );
+	if (typeof cytoscape !== 'undefined') { // expose to global cytoscape (i.e. window.cytoscape)
+		register(cytoscape);
 	}
 
 })();