Grid overlay via CSS and a PNG

While working on a site’s CSS, I’ve been using transparent PNGs to overlay a grid image on the page in order to align design elements to the grid. Previously, I specified a repeating background grid image on the body tag, and commented it out when I didn’t want to see the grid. That works fine, but any child elements that use background images or colors will sit on top of the grid, obscuring it. And the repeating grid image will take the place of any background image which is supposed to be part of the design.

One solution is as follows. Add a div element with an ID of “grid.” By specifying absolute positioning for the grid div, you can overlay it on top of your page while you are working on the design. This will allow you to align elements to the grid while keeping the design intact. Comment out the CSS to hide the grid.

Here’s the code and a demonstration:

/* grid overlay */
html {
  position: relative;
}
#grid {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: url(/images/960-grid-overlay.png) repeat-y center top;
}