Creating a Photo Background for a Webpage Using CSS

If you're subscribed to Before & After magazine, chances are you received the article on how to create an IMAX-like photo background for your Web page a while ago. They showed you how to do it in Adobe GoLive using its built-in CSS tools, but what if you don't have GoLive? You can easily create the same effect when coding the Web page yourself with CSS. In the first part of this tutorial, you'll learn how to choose and prepare your photo and get it ready for the web. Let's get started.

**You'll need basic knowledge of Photoshop (gradients, tools, etc.) to be able to understand this tutorial.**

Part One: Choosing and preparing your image

For this tutorial, I'll be using the same photo used in the Before & After magazine article, which can be found at iStockPhoto. Here are a few tips on choosing a good image (taken from the article).

Choose a wide photo.

Your photo needs to be pretty wide - at least 1500 pixels - so that even on a big monitor it's always bigger than the browser window no matter how far it opens.

A focal point is key.

A clear, central focal point gives the page a place to begin. Use photos that have a strong center of interest. Look for images with a lot of open space and little detail. Avoid fussy, detailed images or off-center focal points, which busy the page and distract the reader.

Open up your image in Adobe Photoshop. Go to Image>Image Size, and set the Resolution (DPI) to 72. Before you click OK, uncheck 'Resample Image' at the bottom of the window. You should not see any changes to your image after clicking OK.

Next we need to fade the bottom of the image into a solid color. To do this, zoom (Z) into 100% and using the Eyedropper tool (I), select a color near the bottom of the image. In this case, I'm using #40413c. Remember this color - you'll need it later.

Create a new layer and select the Gradient tool. Make sure the color you just selected is set as the foreground color, and select the gradient 'Foreground to Transparent' (it should be the second one on the list). On the new layer, draw your gradient line from the bottom up just a small ways up the image. Duplicate this layer when you're done and then merge them both to the bottom (Background) layer.

Next, we may need to trim the photo. In this case, I have a lot of open space at the top. Though it looks nice, it's not our focal point, and we need to trim some off. To do this, select the Rectangular Marquee tool (M) and select the part of the image that you want to keep. When you have done this, keep the selection active and Crop it (Edit>Crop).

If you want to make a few more adjustments to your photo, such as Contrast, Brightness, etc., go ahead and do so now. When you're finished, go to File>Save for Web, select the 'JPEG High' compression setting, and click save. Save it on your Desktop as 'background.jpg'.

Part Two: Use CSS to create a photographic background

Create a folder on your Desktop and name it 'images'. Place your recently saved background.jpg picture in there. Next, create another folder and name it 'Photo Background'. Drag the 'images' folder in there.

Open up Notepad (or your favorite text editor). Save two files - index.htm and style.css - in the 'Photo Background' folder on your Desktop. Make sure you select 'All files' when saving these two documents.

In style.css, place the following code:

You can replace the HTML color value with the color you selected earlier. This code will be explained at the end of the tutorial.

Then, in the index.htm file, place your standard HTML code with a link to the stylesheet.

When you're finished with that, open up your index.htm file in your web browser. You should see your photo set as the background, faded into a solid color at the bottom. Easy, huh?

CSS Code Explained

Click here to download the source file.