You may all be wondering how a background image can have a fade on the sides, a small gradient that looks exactily like a drop shadow effect on the main table/layer of the website. Well, guess what? It’s not on the layer, and it’s not on the table, it’s directly on the background.

To accomplish this task we will need not just Photoshop but also an html editor, like Dreamweaver. But notepad will be fine…

First, a little intro. Lets talk about dimensions. When you are designing a website you have to think about dimensions. What will it be? Fixed with tables or layers or are you going to full screen and let your site flow around the edges? If you’re using relative widths then this is not for you. But if your going with fixed widths sit down and enjoy the ride.

A lot of us is still designing websites for a standard 800×600 resolution. Some are also designing them for 1024×768. These are the standards.

So, if we make a background image wide enough to show on all resolutions, and we manage to center that image, the image will show in the correct position on all browsers, right? Damm right! So lets get on with it.

Lets go for a large width of 2000 pixels. Don’t worry about the file size, it will be very small as we’re going to repeat just a single portion of the background.

Open your Photoshop and create a new file with these dimensions:

Width: 2000px
Height: 9px (yes, 9, nine!)
Background: White

Just look below, you have all the options there:

Now lets assume that you are designing a website with a fixed width of 750px, meaning that your center table or layer will have 750px of maximum width. If you’re using just layers (thus using CSS driven formating) don’t forget that the Box Model puts all the extras outside the layer, so if you’re using paddings margins or borders you will need to add those widths to the outer box. But assuming that you have none of those, then the total width of your website window will be 750px.

It’s time to grab your calculator now. So, if our image in photoshop is 2000px wide, and our website is 750px wide, then we have:

625px on the left + 750px for the website + 625px on the right = 2000px

With an image of 2000px wide, if we want a centered area of 750px then we’ll get 625px on each side of our 750px area, wich in fact is the area reserved for the website.

Now, i’m going to do it simple, i’m just going to fill up the whole image with a pattern. I allready have a single dot pattern in my photoshop. Patterns are very easy to do, and i’ll explain it here how you can make a simple pattern like the one used in this tutorial. I have a 9px height image for the background, so my pattern should be 9px height as well, i’m just going to make it a square. Create a new file with 9px width and 9px height. Then Fill the background with some color, i’m going for green. To fill the background go to the EDIT menu and then choose FILL. You’ll get a dialog box like the one below:

Choose “color” from the contents option and then click on a green color. Press OK when you’re done.

Now lets zoom in that image, zoom it to the maximum supported by Photoshop, 1600%. You can use the navigator palette to do it:

Now, with the pencil tool, with 1px tip, draw some pixels at the center, with a darker green, like this:

Now with a lighter green add a light effect on the top and right pixels of that square. Use the pencil tool again to do it.

Ok, now we have the file ready to define it as a pattern. Simply go to the EDIT menu and choose the option “Define pattern”:

Choose a name for your pattern and you’re done. You can now close this file, you wont need it again.

Now, back to our original file. To fill the background layer of our photoshop file with a pattern first we need to create a copy of the background layer. It’s easy, just click and drag the background on the layers palette onto the “new layer” icon, like this:

In this layer, the “background copy”, we can apply styles, wich were blocked on the original background. To apply a Pattern Overlay Style on this layer, make sure that you have the layer selected first, and the click on the “Add Layer Style” icon on the layers palette, it’s that little “f” on the left of the “new layer” icon:

You will see a dialog box with all the layer styles, and the pattern overlay option will be selected. Now go on and choose the pattern you’ve created before, and dont even bother to change any options, these will do fine:

Press OK, and you’re done. Well not quite, this is the easy part. Lets go on to the next step then. All the image is filled with the pattern, and we need to stand out the part of the image that is occupied with the website. So we’re going to cut a white square, 750px wide right in the middle of it. How? Simple! What are guides for anyway?

The guides are very usefull when we want to design, align, cut and place things in specific areas or points. We’ll use the guides to draw the white rectangle in the correct place. Still have your calculator at hand? Lets see where this vertical guides must go. The first at 625px, the second at 1375px. Why? Because with a 2000px wide image, 625px is the left edge of a centered 750px rectangle right in the middle of it and 1375px is the right edge. Plain simple calculations.

Adding the guides is also an easy task, just go into the VIEW menu and choose NEW GUIDE. By default you should have the vertical guide option selected. Go on and put the first guide position and click OK.

Repeat the last step for the second guide, with the value 1375. Now, for the rectangle to go right in the guides you need to make sure that you have SNAP to guides activated. The SNAP function is also in the VIEW menu. Snap is like a magnetism, it will fit your mouse cursor to the snaping object, in this case the guides, when you’re close enough to them.

So lets draw the rectangle. Choose the RECTANGLE tool from the toolbox and draw a white rectangle between the 2 guides:

In the image below you can clearly see the rectangle in the center of the image. Look at where the guides are placed. If you dont have the ruler to confirm the location of the guides you can activate it in the VIEW menu, under the option RULER.

A close-up of that image at the left edge is shown below. Notice the position of the guide and the left edge of the rectangle. A perfect match.

Now for the gradient, to create the shadow effect. I’m going to make a big gradient so it gets pretty clear. Lets say… 25px. We need the shadow on each side , so lets grab the calculator again.

Left side: 625px - 25px = 600px (new guide to be placed here)
Right side: 1375px + 25px = 1400px (new guide to be placed here)

Lets add up those new guides. Go into VIEW menu and create these new guides. The left side should now look like this:

These guides will hold up a selection for the gradient. I’m going to do both gradients (left and right) on the same layer. Lets start with the left one. First we need a new layer to put the gradients on. Click on the “new layer” icon on the layers palette. Now, for the selection, just use a simple rectangular marquee:

The dotted area is the selection:

Now lets choose the gradient. I will go with a black to transparent gradient. In order to make a perfect gradient, and when we’re talking transparency both colors on the color picker should be the same before selecting the gradient tool. So go on and choose black for the foreground and black for the background, and after choose the gradient tool:

We will get a default black to black gradient (wich doesnt look like a gradient at all, but it will after we change its opacity). To choose the black to transparent gradient click on the gradient color options, at the top:

Look closely, and you’ll notice that the second option is the exact gradient we’re looking for:

Now, to apply the gradient. Were on the left side of the white rectangle, so the gradient must start 100% black at the right of the selection and 100% transparent at the left, so we need to click on the right and grab the mouse cursor to the left, just like this:

By now you should have everything figured out: do the same on the right side, create the selection between the guides, but this time you wont start at the right side of the selection, but at the left. And here are both sides at a closer look:

Our background image is now complete. Save the file as a GIF, from the option SAVE FOR WEB under the FILE menu. I will choose the name bg.gif and save it under the “images” folder.

The Photoshop part is done, now for the CSS. I’m not going to go deep into CSS, i’m just going to show wich options you should use to get this done. If you have questions about this tutorial just drop me an email (look at my profile, the mail is there). Ok, here’s the code for it, you need the image applied to the whole page, so the background goes into the BODY TAG:

body {
background-image: url(images/bg.gif);
background-repeat: repeat-y;
background-position:center;
}

You can see a sample page here. Look ate the source code, the styles are on the same document, in the HEAD tag. And try to redimension the browser window and look how the background image allways stays at the center with that nice looking shadow on the borders.

And that’s it, there you have a great looking background image with shadows on the borders. Hope you enjoyed this tutorial. Have fun.