Using a Background Image Grid to Lay Out Your Web Site

Learn how to use a background image of a grid to lay out your web site more precisely.

I recently came across Khoi Vinh’s post about using a background image of a gridΒ to help you lay out your page as you are building it [via Garrett Dimon].

Simply put, you apply the grid to the body of your page as a background image so that it displays behind your site. Thus you can use it to precisely line up your layout.

This seems like such a useful technique, especially when it comes to resolving cross-browser differences, that I’m surprised I haven’t seen it referenced before (maybe I just don’t move in the right circles).

As Khoi says himself:

Coming up with this little trick left me very pleased with myself, as it allowed me to produce easily the most precise layouts of my career.

I thought it might be useful expand upon this idea and create a generic grid template that one could use with any layout, and so I came up with the example below:

I haven’t thoroughly tested it out yet in the form of applying it to real-world design projects, so if there are some improvements you’d like to see just let me know.

Or, you can add them yourself; I’ve included the Fireworks source fileΒ (old school, I know) for you to customize as you see fit.

In a similar vein, you should also check out Greg Storey’s ruler image technique, which works well in conjunction with the grid image.

43 thoughts on “Using a Background Image Grid to Lay Out Your Web Site”

  1. Wow this is absolutly brilliant and highly useful. πŸ˜€
    will be using it when composing my next css design.
    10X.

  2. Hello,
    I really like this idea… but I would like to suggest an improvement on the design πŸ˜‰
    I would use css to set the background to the HTML tag rather than the body, incase you want to use the body tag for a fixed width layout.
    And then, you can then make the body transparent so you can always see the grid and where objects cross each other.
    The example can be seen here:
    gatekiller.co.uk/LayoutGrid/
    Feel free to use and abuse to your hearts content πŸ™‚
    Cheers
    GK

  3. Great tip. I have always used ruler add-ons for browser to measure distances (which still has it’s time and place) but this seems like a better method of laying out the page itself.

  4. If like me you like to initially design a site in say photoshop, this is great image as a background layer as you can see exactly how your site will fit prior to building it in css. I found it easier to use than the rulers and grids provided.
    GREAT IDEA.

  5. My God, why didn’t I think of it!?
    But I’ll move even further – this might help some people. Put the background image on the HTML element, and than set opacity: 0.5; for the BODY element. How about that?

  6. All – thanks for the feedback and I hope you find the template useful. My hope is that others will take the idea and develop it (much like “Stephen has done”:http://www.smileycat.com/miaow/archives/000264.php#comment-13164 ) as I’m sure there are numerous enhancements that can be made.
    For example, although it looks nice, I’m not sure how useful the ruler along the top really is. Perhaps it needs to be repeated further down the page? Also, should there be a vertical ruler or is that just overkill?
    I haven’t used this technique enough to know what works and what doesn’t, but as I come up with new ideas I’ll be certain to add them to this post.

  7. Thats a great idea. I’ve been generally applying faux column backgrounds and workging from those but this is a great extension of that idea.

  8. Hats off!! And a better proposal/solution than Khoi Vinh’s, which was also inspired from Airbag (Greg Storey)…
    It is a must for anyone toying around with complex designs and content management systems (like Joomla for example). I belong to the designer/developer hybrid kind of people and as time passes by and my knowledge on both progresses, I tend to use less Photoshop, but more coding.
    I find it faster to use a starting xhtml/css layout template to design a new template, in comparison to what I used to do with Photoshop. Photoshop now serves for pure graphic imagery and in an assistive way.
    Your layout grid is now a part of this starting template and a godsend when testing through different browsers, when measuring tools don’t work.
    For anyone working on CMSs like Joomla, it shouldn’t be difficult to just apply the grid background on a duplicate css style, login as admin when necessery and switch through stylesheets on the frontend to enable/disable the grid live.
    Again, hats off!!

  9. This is a great technique for fixed-width layouts but doesn’t do much for promoting liquid or elastic layouts.
    Nice idea however and thanks for sharing the graphic(s).

  10. Oh my god a nice tip, this really works for easly and quick finding browser differences. Very much appreciated tip!
    You made my day!

  11. Very nice. I’m too lazy to do this myself, but a version that starts out at 0,0 in the top center might also be helpful.
    And I think the application for this is more than just for any one tag (body, or the suggested html). You can use it as a background image for any individual element that you want to check the measurements of. Might even helps some to understand the box model.

  12. This has been in Dreamweaver for ages as something you can simply turn on or off without having to create a background image.

  13. Hi.
    I created a simple extension that adds/removes layout grid to the current page.
    I changed the starting point so you’re able to always view the rule mark. This extension adds padding to HTML element and sets opacity to 0.5.
    Works great if you don’t use absolute-positioned elements.
    Check it out at http://simplesideias.com.br/layoutgrid.xpi
    Btw, great article!!!

  14. *Nando* – can you tell me how you get the extension to work? Maybe I’m missing something, but I can’t see how you activate it!
    *JM* – really? I didn’t know that. There again, although I’m on Dreamweaver 8 I still tend to use it as an expensive text editor.
    *Note to self*: I must take the time to learn some of the things you can do in DW to make coding easier.

  15. *Nando* – got it at last! The problem was that I couldn’t find the icon in order to click on it. I finally noticed that it was down in the status bar.
    Wow – it really works great. I’ve been clicking around a bunch of sites looking at how they line up with the grid. This could be really useful. Thanks!

  16. Well, it just takes the simple things in life…..
    Awsome idea. I will definately be using this in any web designs I creat in the future. Plus as I work in one of the worlds largest marketing agencies I’m definately going to try and get our designers to use this image on a base layer within their Photoshop designs to help the developers receive pixel perfect designs.

  17. Good idea that, with that grid/ruler image. Never thought about that before. It’s as always – the easiest ideas are the most useful ones πŸ˜‰

  18. There seems to be alot of buzz going around about this post πŸ™‚
    I really like the firefox extentions, however, im going to go with Andy Budd’s idea of bookmarklets.
    This means you can use the grid idea is any browser not just firefox, which I hope we all should be doing πŸ™‚
    Cheers
    GK

  19. After reading Andy Budd’s article and the idea of bookmarklets, I quickly created by own bookmarklet based upon my Layout Grid. This bookmarklet sets the background to the HTML tag and then sets the BODY tag to an opacity of 75%. Here it is:
    Layout Grid Bookmarklet (text file).
    Hope this is useful to all πŸ™‚
    Cheers
    GK

Comments are closed.