Background Treatment
Return to the Index
I am confused by all the BACKGROUND choices. Can I make the background transparent?
All the OverLIB args are shown inside the popup message. The message is repeated in BLACK text and WHITE text so you can appreciate some of the choices.

These configurations work well

  1. You can use OverLIB Default background colors. Don't specify *COLOR or *BACKGROUND. These default colors are hard-coded into overLIB. The WHITE caption text is hardcoded (in overlib) as the default CAPTIONCOLOR.
  2. You can use BGCOLOR to change the color of the CAPTION background and BORDER.
    (Same with BORDER,10).
  3. You can use FGCOLOR to change the color of the TEXT background.
    (Same with BORDER,10).
  4. You can get a transparent BACKGROUND by setting FGCOLOR and BGCOLOR to null. Setting these colors to null removes everything that stands between the popup text and the main page. The unpleasant consequences are that
    • the white text of the CAPTION gets lost, because the contrasting background of the CAPTION bar is gone (BGCOLOR) (I forced the CAPTION text color to red so you could see it),
    • the border gets lost, because BGCOLOR is also the border color
    • the white TEXT gets lost, because the contrasting background color of the TEXT area is controlled by FGCOLOR.
    This looks bad with text-over-text, but it can work well with text over an image. Mouseover the photo below.

    You can NOT have transparency AND the colored CAPTION bar by installing a BGCOLOR or allowing the OverLIB default BGCOLOR to operate.
    This will happen because of the way that OverLIB handles BGCOLOR. It would be easy to modify OverLIB to treat BGCOLOR differently, but it would violate version compatability, so I won't.

  5. You can use FGBACKGROUND to place a background image behind the TEXT. (Yes, animated gifs can be used as backgrounds anywhere.)
    (Same with BORDER,10). Note that normal browser background tiling is in effect. This image has a white background, so the second sentence (white TEXTCOLOR) is nearly invisible.

    I recommend this as your "standard" configuration if background images are required. In the next section, I will demonstrate some problems with BACKGROUND and BGBACKGROUND. But first, let's build upon the "standard".

  6. You can get a semi-transparent BACKGROUND by setting FGCOLOR and BGCOLOR to null AND adding a semi-transparent image as FGBACKGROUND. This looks bad with text-over-text, but it works very well with text over an image. Mouseover the photo below.

    The transparent background (#4 above) lost the borders and the contrasting background color for the CAPTION bar. Use the semi-transparent background image to clearly delineate the TEXT area of the popup in the absence of the border. Notice that the white TEXT shows clearly in the popup, whether the popup is positioned over the main window image or over the main window text.
    Don't use a CAPTION. If you want to use the CAPTION, see #7.

  7. You can get a semi-transparent BACKGROUND that also provides for the CAPTION by setting FGCOLOR and BGCOLOR to null AND adding a semi-transparent image as BGBACKGROUND. Mouseover the photo below.

    This is the most generic solution to "transparency". The only thing lacking is a unique background for the CAPTION bar. If you like the semi-transparent background, you can copy it at the bottom of this page.

  8. You can use FGBACKGROUND and BGBACKGROUND to place different background images behind the TEXT and the CAPTION
    (Same with BORDER,10)
    • IE4 - works as expected. The CAPTION and the TEXT area have different background images.
    • NS4 - works as expected, except that the BGBACKGROUND image is rendered separately for the BORDER area and the CAPTION bar. This probably would not be noticable if the default BORDER,1 is used.
  9. In v3.50, custom classes were first introduced and have been continued with the current version of overlib. By defining custom classes for the TEXT, CAPTION, and CLOSE areas of the popup you can also specify background images for these areas (using the rules of CSS) to achieve effects similar to those discribed in the previous points.

These configurations do NOT work well

They are shown here only to demonstrate why they should not be used. All these have a problem in one browser or the other, and you should view them in Netscape 4 and in IE5 side-by-side to see the failure.

  1. You can use BGBACKGROUND to place a background image behind the CAPTION.
    (Same with BORDER,10)
    • IE4 - works as expected. The FGCOLOR (here, the default) provides a solid color background for the TEXT.
    • NS4 is designed so that the BGBACKGROUND image starts separately in every cell of the popup's main table. Look at the "BORDER,10" example in a NS4 browser. You will see 3 repetitions of the BGBACKGROUND image (the border, the CAPTION and the TEXT area). The FGCOLOR is ignored and is overridden by the BGBACKGROUND.
    • AVOID BGBACKGROUND, unless your background image is geometric as in #7 above, or you are ALSO using FGBACKGROUND as in #8 above.
  2. You can use BACKGROUND to place a background image behind the TEXT. (The BACKGROUND token causes OverLIB to use a different internal function which cancels the CAPTION entirely).
    • NS4 - The BACKGROUND image will haunt all other popups on the page, because of an omission in OverLIB. This only affects users who have Accessability options selected in Windows and/or the browser configuration. There is a patch for OverLIB to correct this problem, but I'm not going to bother, because there is no reason to use this. FGBACKGROUND with no CAPTION works just as well, and the patch isn't necessary.

If you want to use the semi-transparent background, then right-click this image and save a copy. CAUTION. To not edit this image unless your graphic editor is capable of preserving "tranparency". Don't worry about the size. If this image is used as a *BACKGROUND, it will tile or clip as required.

Please let me know if you encounter problems.Modified by REB,June 1, 2004