PhotoshopWeb Page Background Images

Barbara Chamberlin

PDF version of this page

Using background images in your website can create a professional design for your website, or it can curse your site as amateurish. In this tutorial, create a wrapable background image for a website. Following the tutorial are some recommendations on background image design.

Loading a background image into a webpage is simple, you define and image as the background image, and the browser repeats that image as a pattern, for the width and height of the browser window. It works just like your desktop pattern on your computer, the bigger the desktop, the more times the pattern is repeated.

This desktop pattern...

yields this...

and this.

This desktop pattern (with outline for illustration)...

yields this...

and this.

Creating a Simple Background Image

1. Create a new Photoshop document, 800 pixels wide and 20 pixels tall. We want to create a legal tablet background.

2. Using yellow, pink and blue from the web palette (See Saving Files for the Web tutorial for information on loading the web palette), create a single row of the tablet, remembering that it will be repeated several times vertically.

3. Save the file as a GIF to the folder where you are storing your web pages. (See Saving Files for the Web for instructions on saving a GIF).

4. Open the HTML document you want to place the background image in. The code for the background image goes in the tag. To place the above graphic, named rule.gif in an html document, the body tag would like this:

A page using the background could look like this:

Here's a hint... If you are having trouble visualizing what your pattern will look like once it is loaded into a background use Photoshop's Define Pattern command. Select all of your image, then choose Edit->Define Pattern. Create a new, larger window (such as 800 pixels wide and 550 pixels tall) and select Edit->Fill. In the dialog box, for contents use: Pattern. You'll have a chance to see your pattern. If needed, return to your original document, make changes and repeat the process until the background image is just right.

Creating a Wrapable Image from a Photo

1. Using a photo as a background image often presents a problem: when repeated as a background image, the visible edges of the photo distract from the desired effect. Here's how to make seamless background images.

2. From the Menu, select Filter->Other->Offset. The adobe.tif image is 300 by 131 pixels. Offset the image vertically by 75 pixels. For undefined areas, check wrap around. Notice the horizontal line in the middle of the image,that is where the previous edges of the photo now meet.

3. Use the rubber stamp to 'erase' the horizontal line. Use the bottom edge of some of the other adobe bricks to repair the line. Also use the smudge tool or blur tool to erase that line. Now, your image is seamless vertically, but not horizontally.

4. From the Menu, select Filter->Other->Offset. This time, offset the image vertically 0 pixels, but 150 pixels horizontally. You should have a vertical line. Using the rubber stamp, smudge and blur tools, work to erast the vertical line.

5. You now have a seamless image, perfect for backgrounds.

Guidelines for Using Background Images

1. Keep image size small. Remember that the browser is going to have to read this image, and replicate it several times. Think ahead to create images that are as small as possible.

2. Background images should complement the information on the page. All too often, background images distract from the page, making the text difficult to read.

3. Consider using light colors as a background for extensive text. If you have a busy background, such as the adobe pattern from the previous lesson, consider placing your text in a table, then filling the table cell with a light color.

4. Try making a background pattern that uses a border, in stead of an all over pattern. It still establishes the design of the background, while placing important text on a clean back-ground.

5. Use table design within your web page to put text where it belongs on a web page.

6. View your background image on a variety of browser sizes, to be sure it wraps the way you want it to.

PDF version of this page

Back to Online Seminars