Adobe CS5 Dreamweaver Background Images - dummies

By Jennifer Smith, Christopher Smith, Fred Gerantabee

Creating backgrounds for web pages in Adobe Creative Suite 5 (Adobe CS5) Dreamweaver can be pursued in more ways than most people would imagine. You can create a repeating pattern with a single small image, create a watermark, or use a large image to fill an entire background.

  1. In Photoshop, choose File→New to create a new image.

  2. In the New dialog box that appears, create an image that’s much wider than it is high, choose RGB, choose 72 dpi, and then click OK.

    For example, enter 1000 in the Width text field and 20 in the Height text field.

  3. Select a foreground and background color to create a blend.

    Use the Gradient tool to Shift+drag from the top to the bottom of the image area to create a gradient fill.

  4. Choose File→Save for web.

    Save the image as a JPEG file in your site’s web content folder, and then close the image.

  5. Open your Dreamweaver page.

    In Dreamweaver, choose Modify→Page Properties or click the Page Properties button in the Property inspector to place the image as a background image in your web page.

    If the Page Properties button isn’t visible, click the page — be sure not to select another element, such as an image.

  6. The Page Properties dialog box appears.

    Click the Browse button to the right of the background image, navigate to the location of your saved background image, and then click Choose/OK; click OK in the Page Properties dialog box.

    The image appears in the background, repeating and creating a cool background gradient across the page!

Depending on the size and resolution of a user’s monitor, your background image may be forced to repeat. Repeating a background image can yield some creative results.

An image set as a background repeats horizontally and vertically by default.
An image set as a background repeats horizontally and vertically by default.

In certain cases, you may not see your background until you click the Preview/Debug in Browser button and preview the page in your default browser.