How to Insert a Background Image in Dreamweaver - dummies

How to Insert a Background Image in Dreamweaver

By Janine Warner

Background images can add depth and richness to a Dreamweaver page design. Used cleverly, a background image that downloads quickly and efficiently helps create the illusion that the entire page is one large image.

The trick is to use an image with a small file size that creates the impression of a large image. One way this works on the web is to use the default settings for a background image, which cause the image to tile (repeat) across and down the page.

[Credit: Photo by Casey Stoll]
Credit: Photo by Casey Stoll

Text placed on certain backgrounds can be difficult to read. Choose your background images carefully and make sure your background and your text have plenty of contrast. Reading on a computer screen is hard enough.

With CSS, you can have far greater control over the display of a background image. When you create a CSS background style, you can insert a background image that doesn’t repeat or that repeats only across the Y axis or down the X axis of the page.

To insert a background image in Dreamweaver, choose Modify→Page Properties, click the Browse button to the right of the Background Image field, and select the image you want to use as your background. If the image isn’t already in your local site folder, Dreamweaver offers to copy it there when you click OK.


When you insert an image using Dreamweaver’s Page Properties feature, you can use the Repeat drop-down list to specify how the image repeats on the page. When you specify a repeat option, Dreamweaver automatically creates a style for the page with these background settings. If you use the CSS Definition dialog box to edit the background options in the body style, you can specify where the background image is displayed.