L Chan's Checkerboard Background Effect Tutorial


<disclaimer>
I wrote this and stuff. Don't claime it as your own. I'm not making any money off of it.
If there is something wrong, or unclear about this tutorial, let me know.
Laura L. Morris
Seraphchild.com
sc(at)seraphchild(dot)com
</disclaimer>


Open your graphics program. I use Paint Shop Pro 7, so all examples will be referancing it. You should still be able to follow along if you use a differant program though.

Pick your two colors for your checkerboard. If you wish to put text over it, make sure the two colours do not differ much (ie. #C1BCFE #BDCEFD together) However, for this example, I'm using two very different colours for clarity.

My first colour is just white. And I know I want my chekers to be 5px by 5px. I need to double it on each side, so I will open a blank canvas that is 10px by 10px and white.
figure #1
1st colour, no zoom
figure #1


Zoom in close to your image so you can see each pixel pretty well. This is what it would look like if you zoom in and had each pixel marked off. It won't actually look like this. It's just to show you. It will look like figure 3.
figure #2
Zoomed, each pixel marked off
figure #2
figure #3
Zoomed, no markings
figure #3


Because I want 5px by 5 px square for each color, I increase my paint brush tool to 5 pixels, making sure I have the the square shape chosen and that my hardness, opacity, and density are all at 100. Before I even touch my canvas with the brush, though, I choose my second colour. In this case, I picked a burnt orange. I line up the top and left edges of the brush with the top and left edges of the canvas. Click down once. Make sure you don't move the brush.
figure #4
Zoomed, one square of 2nd colour
figure #4
figure #5
No Zoomed, one square of 2nd colour
figure #5


Now, without changing the brush at all, line up the bottom and right sides of the brush with the bottom and right sides of the canvas.
figure #6
Zoomed, 2nd colour done
figure #6
figure #7
No Zoomed, 2nd colour done
figure #7
Export your image to your preferred file type. I'm using jpg, but it's not that important. Now you can use it as a repeating background for a page or a table. For the page, your code would be in the body tag.
<body background="checker.jpg">:

If you want to use it in a table, you can do the whole table;
<table background="checker.jpg">
the table row;
<table> <tr background="checker.jpg">
or the table cell;
<table> <tr> <td background="checker.jpg">

That's it. This is how min looks repeated.

Isn't that annoying? Great, you're done! Yey!