I have noticed that a lot of visitors are coming here from Google after searching for this tutorial, so, here you go.

1. Open Photoshop and a blank transparent canvas of say 20×20 pixels. Now, zoom right in to about 1200% and select black on your palette and the pencil size 1. Draw a diagonal line from corner to corner (tip : click the first corner, let go and place your pointer on the other corner. Hold “shift” and click again. A straight diagonal line will appear)

Now do the same one pixel either side of the line you have just drawn, so you have a thicker diagonal line.

Do the same again, and then again until you end up with this:

Now we have to add two little bits in the other corners like the image below.

Hold “Ctrl” and press “A” to select the whole canvas. Now click “Edit” – “Define Pattern” and call it whatever you like. You can now close that canvas, we have finished with it.

Now, here’s what I do. Open a new canvas say 500×500 with a background colour of whatever you want the background colour of your page to be. I chose blue (#2E3192).

Now add a new layer and select the Paint Bucket tool, select the “Fill” option to “Pattern” and click the little drop down arrow next to it and find your newly added pattern and click on it. Now place the paintbucket inside your canvas and click.

You’ll probably think the lines are too dark, but simply changing the opacity of that layer to something like 20% or 30% will do the trick.

Now, merge your visible layers (click the arrow in the top right of the laters bit and choose “Merge Visible”).

Now drag a guide 20px from the top of the canvas, and another 20px from the left edge and using the rectangle marquee select the top left corner using the guides. Click “Ctrl” and “C” to copy, then “Ctrl” and “N” for a new layer. Click “ok” then “Ctrl” and “V” to paste onto the new layer. You should now have the same as the image below:

Save this as a .gif and call it something like body-bg.gif so you know what it is.

All you need to do now, is in your CSS file for your website, add the following:

body {
background-image: url(“images/body-bg.gif”);
}

This will now tile your little 20×20 gif all over the page giving the diagonal stripes!!

You can experiment and change the canvas size and draw thicker or thinner lines to achieve different sized lines.

Have a go!

Related posts:

1. Create a simple web page with CSS and a background image
2. Make a simple diagonal page background – version 2
3. How to create a tiled background for your web page
4. Creating depth with your image compositions in Photoshop
5. Is the diagonal line background style old hat now?