So, this thing took lot of my time. I hope it will save yours.

Here, we need a parent div and a child div. Parent div will have the image in background, I am using inline style so that one can use it in as many pages as he/she wants.

Here's the HTML

<div id="kinetic" class="imageDiv" style="background:url('green_life.png');">
   <div class="gridBackground">
       <!-- Put anything you like over image here -->
   </div>
</div>

Here's css for imageDiv and gridBackground, I used linear-gradient style for drawing lines.

.imageDiv{
  width:900px; 
  height:350px;
  border:1px solid #ccc;
}
.gridBackground{
  background-color: transparent;
  background-image: linear-gradient(0deg, transparent 24%, 
                                      rgba(255, 255, 255, 0.7) 25%, 
                                      rgba(255, 255, 255, .05) 26%, 
                                      transparent 27%, transparent 74%, 
                                      rgba(255, 255, 255, .05) 75%, 
                                      rgba(255, 255, 255, .05) 76%, 
                                      transparent 74%, transparent), 
                                      linear-gradient(90deg, transparent 24%, 
                                      rgba(255, 255, 255, 0.7) 25%, 
                                      rgba(255, 255, 255, .05) 26%, 
                                      transparent 27%, transparent 74%, 
                                      rgba(255, 255, 255, .05) 75%, 
                                      rgba(255, 255, 255, .05) 76%, transparent 77%, transparent);
  height:100%;
  background-size:50px 50px;
}

This will draw white lines which will give a grid impression in html.

Play with transparency to change line width and number of grids, play with rgba to change grid lines color

Note: transparent changes may blur the grid lines so use them wisely.

Although, I don't want it but I had to put image in background using style, I would have love it, if it can be done using img tag