Mr. O'Connell's Technology Home Page
home courses biography links

Background Image Tutorial

What you will learn and be able to do:

By the end of this tutorial, you will create a new background image for your website using Photoshop Elements. You will use this background image on your web site instead of using a background color. You will also learn the basic operations of Photoshop Element’s Gradient Tool. Finally, you will learn how to export the image you have created to Dreamweaver, and learn how to insert your new background image in an existing web page.

This tutorial is for websites that are using External CSS to generate background color for the entire website.

Part One: Creating the background image in Photoshop Elements

Note: As always, if the instructions don't mention a dialog box setting, leave it at the default value.

  • Open the Photoshop Elements Editor
  • Chose File>New>Blank File (ctrl+N)
  • In the New dialog box:
    • Name: bg_1
    • Width: 1400 pixels
    • Height: 2000 pixels
    • Resolution: 72 pixels/inch
    • Click Okay
  • Arrange the work area so that you can see the entire canvas
  • Select the Gradient Tool (G)
  • In the toolbar towards the top left of the screen (not the one at the very top), select Edit...

In the Gradient Editor dialog box, you will see a horizontal gradient bar. Below the bar, there are two color stops. This is where you will chose the two colors for your gradient. You must chose two colors that will provide good contrast to your web site’s text colors. For example, if you are using dark text, use two light color for your gradient.

  • Double click the bottom left color stop. Chose your first color. Make sure that Only Web Colors is selected.

  • Double click the right color stop. Chose your second color. Make sure that Only Web Colors is selected.

  • Click Okay

Perform the following experiments to see how the gradient tool works in this configuration. Each time you try something, pause to look at your results, and try to imagine how it will look on your existing web page.

  • Press and Drag from the top center of your background image to the bottom center.

  • Press and Drag from the bottom center of your background image to the top center.

  • Press and Drag from the left center of your background image to the right center.

  • Press and Drag from the right center of your background image to the left center.

  • Press and Drag from the top left of your background image to the bottom right.

  • Press and Drag from the bottom right  of your background image to the top left.

  • Press and Drag from the top right  of your background image to the bottom left.

  • Press and Drag from the bottom left top right  of your background image to the bottom left.

When you find a combination that you like, save your work:

  • File>Save As

  • Name: bg_1

  • Format: CompuServe GIF (*.GIF)

  • Navigate to your website folder

  • Open your images folder

  • Create a new folder, and name it bg_images

  • Open the bg_images folder

  • Select Save

  • The Indexed Color dialog box will open.

    • Select Okay

  • The Gif Options dialog box will open.

    • Select Okay

Continue this process until you have created four background images. Name them bg_1, bg_2, bg_3, and bg_4. Save all four in the bg_images folder you created on your website.

Part Two: Inserting the background image on an existing website

  • Open Dreamweaver

  • Open the index.html page

  • Expand the CSS Styles panel

  • Double click body

  • On the left side of the dialog box, select Background

  • Click the Browse button next to Background-image

  • Navigate to your bg_images folder

  • Double click bg_1

  • Set Background_repeat to no-repeat

  • Click Okay

Save your work, and Preview your website. You should see your background image appear on every page of your website. If you are not happy with the results, try using one of your other background images, or create a new background image that works for your website.

Part Three: Final Adjustments

After you have inserted your background image and you are relatively satisfied with the result, you should fine tune and evaluate your work

  • Put your website in Preview mode, and look carefully at every bit of text on every page.

  • First and foremost, ask yourself if all of your text still retains a high degree of readability and contrast against the new background image.

  • If not, employ one of the following strategies:

    • Try adjusting the size, weight, and color of the text by changing values in the site's CSS.

    • Edit the background image until the issue is resolved.

    • After you finish editing, put the website back in Preview mode, and look carefully at every bit of text on every page as if you had never seen it before. Ask other web designers to look as well.

    • Once again, ask yourself if all of the text still retains a high degree of readability and contrast against the new background image. If the answer is no, go back and re-edit using the strategies above.

    • Continue this process until the website looks great, and your text still retains a high degree of readability and contrast against the background image.

    Part Four: Evaluation

    This is a graded assignment for the course.

    Preparation for evaluation:

    Having your screen prepared is part of your grade.

    • Have the site open in Dreamweaver.
    • Also have the site open in Preview Mode.
    Evaluation

    The website will be evaluated using this criteria:

    • Does the background image function properly?
    • Is there evidence that CSS is functioning properly?
    • Does text on the site still retain a high degree of readability and contrast against the background image?