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!
Learn advanced css techniques with CSS Mastery:
Newsletter Signup
Latest News
Latest Forum Posts
September 19th, 2006 at 9:42 am
[...] Make a simple diagonal page background using photoshop and css by Ben [...]
September 19th, 2006 at 11:48 am
Nice tutorial, I think it is very helpful for many web designers who start to learn things how to do this and that.
Thanks!
September 19th, 2006 at 11:51 am
Thanks Maris, it’s surprisingly hard to put into instructions what us web designers take for granted and do every day!
September 19th, 2006 at 1:23 pm
Great tutorial & way to interest those visitors! Our list is up as well if you’d like to check it out!!
September 19th, 2006 at 2:04 pm
Nice tutorial! I have wanted to do that with a few websites. I kind got the jist of the CSS by looking at some examples of other sites. I like how you show the steps to put the graphic together. My How To is up if you want to check it out.
September 19th, 2006 at 2:07 pm
Thanks Matt, my aim is to post more tutorials like this for beginner web designers over the coming weeks / months etc.
September 19th, 2006 at 3:47 pm
Hey - thanks for the ‘how to.’ I’ll have to try it, now.
(Found your post through ProBlogger)
September 19th, 2006 at 3:48 pm
Thanks, glad you found it useful
September 19th, 2006 at 5:39 pm
simple and to the point…like that!
September 19th, 2006 at 6:21 pm
It’s the only way really :)
September 22nd, 2006 at 7:00 pm
[...] 1.? Make a simple diagonal page background using photoshop and css? by Ben [...]
September 23rd, 2006 at 1:28 am
[...] Make a simple diagonal page background using photoshop and css by Ben [...]
September 23rd, 2006 at 6:55 am
[...] Make a simple diagonal page background using photoshop and css by Ben [...]
September 23rd, 2006 at 12:01 pm
[...] Make a simple diagonal page background using photoshop and css by Ben [...]
September 23rd, 2006 at 1:50 pm
[...] Make a simple diagonal page background using photoshop and css by Ben [...]
September 23rd, 2006 at 2:54 pm
[...] Make a simple diagonal page background using photoshop and css by Ben [...]
September 23rd, 2006 at 6:04 pm
[...] Make a simple diagonal page background using photoshop and css by Ben [...]
September 25th, 2006 at 1:43 pm
[...] Make a simple diagonal page background using photoshop and css by Ben [...]
September 25th, 2006 at 5:22 pm
Hi Ben,
Nice little trick :)
September 26th, 2006 at 4:59 pm
[...] Make a simple diagonal page background using photoshop and css by Ben [...]
October 1st, 2006 at 5:55 am
[...] Make a simple diagonal page background using photoshop and css by Ben [...]
March 26th, 2007 at 2:13 pm
Take a look at http://www.stripegenerator.com
You can create stripes background in a snap!
March 28th, 2007 at 9:28 am
[...] on from my previous tutorial on how to create the diagonal stripe background, Fabio posted an excellent website that does all the hard work for you. All you need to do is move [...]
March 30th, 2007 at 10:08 am
[...] covered creating a tiled diagonal background in another post, but this one is even [...]