By using some simple PNG graphics and your WebPlus Background settings, you can add some extra interest to your site with a “Glare”
What is a “Glare” ?
Well, you’re looking at one right now.Its the graphic in the top-left corner of this screen. Glares are designed to add interest to your page background. Furthermore, they stay positioned when your browser width is resized. Try it now: resize the width of your browser window. You will notice that the Glare stays in the same position whilst your web page floats over the top.
Opposite, you will see some more examples of Glare graphics that can be used in websites. Of course, you don’t have to make Glares that sit in the top-left of the page. You could create graphics that span the full width of a browser window and position them at the top centre of your background.
I’ll show you how you how to make a simple Glare graphic in a few moments. For the time being, lets see how the graphic is incorporated into your WebPlus Site.
In this site, the page background colour has been set in the Tools/Scheme Manager/Edit options of WebPlus X2. Its been set as a light beige colour. In the same dialog, the on-page colour has been set as transparent. This gives us a consistent background colour that spreads right across the browser window and shows through the web page.
Next, we add the Glare graphic using the Use Background Image option in the same Scheme Manager Dialog. Locate your graphic file and select it.
If you now preview your page in a browser, you will see that your Glare Graphic is tiled over the entire background of your page. This is clearly not the effect we want, so we have to tweak the source code a little so that it doesn’t tile, and remains in the top left of our page.
Back in WebPlus, press Alt-S to bring up the source code window. Look for: /*Master Page Body Style*/ in the body section of the source code. Select the above text (including the /'s) and paste the following code.
background-repeat: no-repeat;background-position: top left;
Now preview your page to see your Glare correctly positioned.
You will also notice on our page that we made our banner semi-transparent so that the glare will show through. This is an optional step, depending on your page layout.
Note to X4 users: There is a different option for setting up background graphics in X4. Its a little simpler than our example so please check your documentation for instructions.