How to Create a New Document from CSS Starter Pages in Dreamweaver CS6
How to Create Rollovers in Adobe Dreamweaver CS6
How to Import Tabular Content into Adobe Dreamweaver CS6

How to Use an Image as a Background in Adobe Dreamweaver CS6

Creating backgrounds for webpages in Adobe Dreamweaver CS6 is fun and 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.

As a default, an HTML background repeats the selected image until it fills the screen. In conjunction with CSS properties, you can control or eliminate repeating behavior and even set precise positioning for a single background image.

If you’re filling a background with a pattern, be sure to create a pattern image that has no discernable edges.

To use to your advantage the default, repeated tiling for a background image, follow these steps:

  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; then 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. In Dreamweaver, choose Modify→Page Properties or click the Page Properties button in the Property inspector to place the image as a background image on 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.

    The Page Properties dialog box appears.

    image0.jpg
  6. In the Page Properties dialog box, click the Browse button to the right of the background image. In the window that appears, navigate to the location of your saved background image, and then click OK.

  7. Back in the Page Properties dialog box, click OK.

    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.

image1.jpg

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.

  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
Dreamweaver CS6 Properties Inspector and Insert Menu
How to Create Relatively Positioned DIVs in Adobe Dreamweaver CS6
How to Modify Absolute-Positioned (AP) Divs in Adobe Dreamweaver CS6
Dreamweaver's Clean Up HTML Tools
How to Use Property Inspector in Adobe Dreamweaver CS6
Advertisement

Inside Dummies.com