Tutorials Map Use the text navigation at the bottom of the page if you cannot see the map
Graphics Tutorials Map Use the text navigation at the bottom of the page if you cannot see the map
Web Graphics

The ability to have an image as a background really appeals to a web designer. There are, however, concerns about contrast and readability when an image is used under text. Remember, the prime reason that folks will go to your web page is to gather information. If they can't read that information they won't stick around!

One way to use an image for a background and still have the text readable is to create a 'stripe' background. That's one where there is a 'stripe' on the left margin, and perhaps another one on the right margin. This webpage has a 'stripe' only on the right side of the page.

This tutorial will show you how you can create a 'stripe' background.

Background 1 After looking around on the web, I discovered two background images that I like. Both of these images are meant to be repeating tiled backgrounds, but I know that a patterned image is hard to use when text is going to be placed on it. Background 2

First, create a new Canvas. You want to make the size wider than the largest monitor. A good rule of thumb is 1600 pixels wide by 75 pixels high.

Open both of the backgrounds that you've found on the web and saved to your disk.

With the Eyedropper Eyedropper Tool select the light color green in the two backgrounds that you've found.


Under Edit fill the background of your new image with that color.

Using the Marquee Marquee Tool select all of one of the backgrounds, and copy it to the clipboard.

Paste the background on your new Canvas and using the Move Tool Move Tool carefully position it to the far left of the image. Pasting


Now copy and paste the next background on your new image. This background should be placed with the left side aligning with the 600 pixel mark on the ruler.

The reason for this is that the typical web surfer has his/her monitor set at a 800x600 screen resolution.

There are however, some folks who still only have a 640x480 screen resolution on their monitor.

By setting the edge of your right side stripe at 600 pixels you will still have some of the stripe showing on the lower resolution monitor.

Carefully continue to paste the background making sure that you align the edges together so that the pattern will match. Repeating patterns

Layers When you are finished, Flatten your image in the Layers palette.

background 3 Save your new background!

Web Building tutorials: Intro | Fonts | Backgrounds | Lists | Layout | Tables | Graphics | FTP
Photoshop tutorials: Getting Started | Text | Backgrounds | Filters | Icons | Photos & Scanning
Fireworks tutorials: Getting Started | Paths, Objects | Fills, Strokes, Effects | Text, Effects | Import/Export | Image Map | Slicing | Behaviors | Putting it all together

© 2005 Interactive Mystery Productions Ltd.
A Company Limited by Guarantee
Registered in England & Wales No. 4792272
All Rights Reserved