This page is for the webservant. It documents simplybible.com’s watermarking system. To escape from here, use Kanga Korna, click this for the Hub, or use the facilities at end of this page.

Background Images

The normal background for simplybible.com pages is a gradient, accross the page, from light green to white. The green at the left edge of the page quickly vignettes to white so that most of the page has a plain white background. The key background image is imgbgblank.jpg (size 900 wide by 700 high). This is the green to white gradient. From the top left corner of this image, a second image is cut imgbg.jpg (size 400 wide by 20 high). The small image is repeated down the page by placing the following entry in the cascading style sheet...

body
{
background-color:#ffffff;
background-image:url(imgbg.jpg);
background-position:left;
background-repeat:repeat-y;
}

The key background image can be used as the background for a div element. This will cover the normal background seamlessly. The div element is written on to the page (within the body element) as follows...

<!--[WATERMARK BEGIN]-->
<div class="bgblank">
     (insert continuing page content)
<!--[WATERMARK END]-->
</div>

Of course this div element requires its own class definition in the cascading style sheet, as follows...

.bgblank
{
background-image:url(imgbgblank.jpg);
background-position:left;
background-repeat:no-repeat;
}

This produces a seamless background, such that you cannot tell, from the browser's display of the page, that the div element is even there. Of course it would be rather pointless doing this, if not for the fact that the div element's background image imgbgblank.jpg makes a nice canvass for a watermark. I will explain that in a moment, but first it is necessary to understand how the div element's background image and the body element's background image blend together.

The div element does not inherit the body element's background. However the div element's background's style specification includes no background color. This means the div element's background is transparent above and below where its background image sits. So the body element's background shows through where the div element is transparent. Both body and div elements have background images with exactly the same green-to-white gradient. The edges of the superimposed watermark are therefore invisible. There is actually such a division under the part of the page you are now reading, as you will see if you view the page source. Although you cannot see it, there is a separate background image being displayed in a layer above the normal body background.

You create a watermark by replicating imgbgblank.jpg, and adding a watermark image to the replica. Proceed as follows...

Insertion of Watermarks

Copy imgbgblank.jpg as a template and save it with a new name such as imgbgdove.jpg which you will notice conforms to a pattern: all watermark images have names starting with imgbg —this makes managing watermarks simpler.

Cut a suitable image to an interesting shape and suitable size, and paste it on to the template as a new layer. Soften the edges of the layer to create a vignette. Next make the layer about 50% transparent, then adjust brightness and contrast until the image is sufficiently washed out yet retaining detail. This is an art, not a science, and some trial and error will be necessary. Keep saving the image as you work, and viewing it on the actual web page. Finally adjust details of the watermark to finish it.

Each watermark must have its own style definition, which is exactly like the one for imgbgblank.jpg except that blank will be something else.

The Use of Watermarks

Watermarks should be used judiciously. They should not be over-used. Reasons to add a watermark to a page include...

To perhaps brighten a page that otherwise would look boring,
To help the visitor quickly realize what the page is about,
To add a subtle emotional element to a page,
To mark a feature page in a series,
To mark a subset of pages within a series,
To mark pages in a thread,
To illustrate without interrupting the flow of text.

Using a watermark does not cause the page to load more slowly. The textual content of the div element will be loaded before the background image. Even if the background image takes a few moments to appear, the user in the meantime can still be looking at and reading the content of the page.

Be careful to place the div beginning and end tags outside of discrete magor elements such as headings and paragraphs. Make sure there is no tag nesting error.

Pages that contain text boxes may not be suitable for watermarks, since text boxes have an opaque background colour which could cover some of the watermark. Besides, a page could look too “busy” if a watermark competes with other visual elements. Use watermarks on pages which are mainly simple text without illustrations and chart elements.

Looking at the area of this page near where you are now reading, you can see an image beneath the text. This is an example of a watermark. Other examples are on The Heart of the Christian and The Gift of the Holy Spirit.

new Point("1")Background Images

new Point("2")Insertion of Watermarks

new Point("3")The Use of Watermarks

Background Images

Insertion of Watermarks

The Use of Watermarks