Background images have long been used as a device to enhance web pages. Adding an image as a page background is easy in Dreamweaver, but before you do so, you have to have a suitable image, saved at a suitable size to display on screen effectively. The sample Prague image supplied is made to a pizel size of 1024 x 768 pixels, at 72 pixels per inch, which is the size of an average high resolution computer display. Be aware that a background image placed in the usual (default) way will be 'repeated' or 'tiled' to fill a higher resolution display. This is not necessarily desirable with a single image, so you may want to study Cascading Style Sheets, an enhanced web coding language which enables you to 'switch off' the repeating of an image. See my own commercial site: www.redgreenandblue.co.uk to see how this works.

A repeating or tiled image can however be used to good effect to create a background pattern. Here the smaller image (say 50 x 50 pixels) uses the standard repeat to make a pattern. On the Venice site, try downloading this image and using it on a page.


Plain Page
the montage images


This is roughly how your Prague home (index) page should look now. OK, but a bit plain. Adding a background image is easy.

First, make sure you have downloaded the background image supplied from here and placed it in your Prague site folder.


Placing the image
Background Image Dialogue


To use the image as a page background, just use the menu command: MODIFY > PAGE PROPERTIES, or you can use the 'Page Properties' button in the Properties Panel. See bottom of next screen shot below)

You will then get the dialogue box on the left. At the tope (circled in red) is the background image box. Just use the 'Browse' button to locate the background.jpg file and insert it.

Finished result
Prague Index in DW




Click 'Apply' to see how it will loo. If you are happy with that, click OK to add the image to your page, as left.

 

Tiling Background image
Tiled background


On your finished Venice site try inserting a 'tiled' background image. Click here to download the image and save it to your Venice site folder. Use the same placing routine as above and you should see the result left.

   
Back to CLAiTweb Home