The Weather at Fidalgo Island, Washington

1.  Create the Background Image

Placing content over an image is easy to do and can produce an attractive layout.  The image will actually be a table background.  This method is a way to add interest to otherwise dull pages, such as "Links" or "Contact Us" pages.  The following tools will be used:

• Tables
• Images
• Modules
• The NoActiveX image uploader

The first task is to select a suitable image.  Not every image is appropriate.  Use one that will not distract from or confuse the text or other content.  Also, the image should fit the overall theme of the site, and enhance its message.  Finally, select an image that blends well with the site colors.

Since you will be working with larger images than usual, you will need to use the NoActiveX image uploader URL to prevent image compression:

http://yourdomain.com/WebSitePageEditor/ImageUploader_NoActiveX.aspx

First, copy the uploader and replace the part in red with the URL of your web site in the same format.  Paste it into a notepad and keep it where you can get to it easily.  Now, open the Image Gallery for your site.  Paste the uploader URL into the address line and execute the address.  It will function much like the document uploader.  When the photo is in your Image Gallery, you are ready to begin.  Keep track of the width and height of the image.  This photo is 600px wide and 681px high.

Open the page in the Page Editor and place the cursor where you want the image.  Click on the Table icon, and create a table, Generic style, with one row and one column.  You will get a single cell with a border containing a space.  Important:  Delete the space to avoid alignment problems later.

Place the mouse pointer in the cell, right-click the mouse, then click on Properties to open the dialog.  Enter the width and height of the cell (e.g. 600px, 681px) and check the box for "Use background picture."  Select the image you uploaded and click on "Apply" to finish the dialog.  The image will now be on your page and you are ready to insert content.  Note:  If the cell is larger than the image, the image will repeat in a tile-like fashion.

2.  Place Content Over the Image

Because you are working inside of a table cell, you will have a bit less control than usual over placement of content.  Nevertheless, you can work within the limitations to achieve an attractive layout.  Elements within a table cell will tend to center themselves vertically.  You can move things up by adding carriage returns under them.
Add carriage returns above to move them down.

To place elements such as images, tables or modules side-by-side, right-click on the element, then click on "Float Left" or "Float Right."  These are table cells with image backgrounds placed inside of the outer cell:

Most modules have transparent backgrounds, so the background image will show through them when viewed:

Use the "Float Left" module property and you can add text to the right of the module.  You can experiment with different font colors to see which will stand out best against the background.

A ◄

Seattle, WA Updated Thursday, March 11, 2010 12:53 PM Rain 46°F High: 50°F Low: 44°F Wind: 17 mph Humidity: 76% MSN Weather Data provided by WDT