Style sheets : A newsthread: new formatting options
Contents ]
Dr Benton

Background Details

The previous workshops must have already convinced you of the efficiency of style sheets for laying out and formatting text. But their power does not stop there. They can also be used to assign a background pattern or colour to a layer.

We have already used a background colour in a previous workshop. This is perfect in some situations but a GIF image could also be used as a layer's background.

To create a layer, proceed as follows:

<div id="NomLayer" style="position:absolute; left:10px; top:10px; width:400px; height:400px; background-color: #E2F4B7; layer-background-color: #E2F4B7; border: 1px none #000000; padding: 12px; background-image:url(logo.gif)">
Stunning!</div>

We are creating a layer named NomLayer.

You have probably noticed the instruction background-image:url(logo.gif) which indicates that we are referencing an image file, logo.gif. This image will be loaded as a background to our layer.

Legibility. Why should we leave the background colour setting if we are already using a background image for the layer?

The answer is simple. If, for whatever reason, the image is not displayed, you can still be sure that your content will stay legible over an appropriate background.



1   2   3   4 
Position