More Creative Use of Backgrounds - 2

This is the second in a series of articles that explains how to make more creative use of backgrounds in WebPlus X2. In this article, we look at the possibilities of creating a background image that integrates into an overall web design. This page demonstrates what we mean.

 

Here you can see two images at the left and right of our web page. These images appear in the blank space that’s often visible on wider screen monitors. The images we’ve chosen just happen to be transparent gifs, but the same technique can be used with just about any type of images, and can be combined with background colours to make a more interesting presentation style for your web site. You will also notice that the images are static - in other words, they stay locked in their position when you scroll the page up and down.  This arrangement allows you to create a background that caters for varying page lengths without having to worry about the image repeating itself on longer pages.

How to Do It

 

You will need to use a graphics program such as DrawPlus to create your background image. Start by creating a page size of 1800 pixels wide by 1000 pixels deep. This size will allow you to create a graphic that won’t repeat on the majority of modern computer screens.

 

The first object you will need to create is a rectangle. This should be the actual page width of your web site pages (in our example, we chose a page width of 700 pixels), and should be 1000 pixels deep.

 

Using your alignment tools, centre the rectangle on your page. This will now give you a guide for graphics placement.

 

You can now add graphic images to either side of your page rectangle. Try and keep the images under 150 -200 pixels wide. This will allow your page and its background to be viewed comfortably in the more common screen sizes of 1200 pixels. Your page should look similar to the illustration below:

 

If you wish, you can also add coloured or graduated backgrounds. These can be applied just to the outside areas or to the page itself (or maybe both). In our example, we used a plain white background to keep the file size relatively small.

 

You now export your image in a any format that suits your image content. In our example we saved as a transparent gif which gave us a file size of about 32 kb.

 

 

Setting Up your Web page in WebPlus

 

Set up your web pages to the correct width to suit your design. This should be the width you specified for the centred rectangle on your background design.

 

Now go to Scheme Manager, and on the edit tab select “Use Background Image” and browse for your image file. This will apply the image to the background of your site. If you preview your site, you will see that the image has been centred on the screen, leaving your web pages to occupy the space in the centre. If you reduce the width of your displayed web browser window, you will notice that the background remains centred.

 

All you have to do now is add a small piece of HTML code to cause the background to remain static on the page. You do this by selecting your master page and right-clicking the page itself. You then select “Attach HTML”. This will bring up the HTML code of your master page from where you can add the instruction. Make the changes as shown below:

 

This will now cause the background image to remain in place on the screen, leaving your pages to scroll as usual.

 

That’s it! I’m sure you can make some very creative background effects using this technique, so get your imagination running wild, and have fun.