Transparent colors behind text
by Steve Greenfield aka Alien Steve
Click on the graphics for a closer view

You want that nice background but it makes your text hard to read. If you set your text inside Tables, you can use an image or color for each table. The trick is to make it partly transparent so that some of the main background image shows through. You could use PNG with alpha channel transparency, but it's hard to find tools to work with PNG properly and many browsers still don't correctly support all of PNG's features.

It is much easier to read text on a more contrasting background.

However, small font sizes may suffer with this technique.

It's much easier to read text on a more contrasting background.

Lightening the background and using black or dark text does work better (in general and with this trick.

This is the pattern blown up. It's just a 2 color GIF checkerboard of white and red, with the white set as transparent.

This is really the same pattern, only with the red pixels set to transparent.

I will assume you have familiarity with using Corel Photopaint:

File/New, select 8 Bit Palleted, size 2x2 pixels.
Set View at 1600% so you can see what you are doing.
Select the color you want (I'll use red for the purposes of this tutorial) and using the Paint tool set to 1 pixel size, click on the two diagonal corners.It should now look like this:
Image/Convert To/8 Bit Palleted, select 2 colors
Using the Rectangle Mask tool while holding down the Ctrl key, drag select the two Red squares.
Edit/Create Fill From Selection
File/New, select 8 Bit Palleted, size 50x50 pixels.
Using the Fill tool, click on the new image. It will fill with the pattern you just created.
Image/Convert To/8 Bit Palleted, select 2 colors.
Save As, GIF, Transparency, Image Color, and select White. If you are trying to create a transparent white layer, of course click the other color.

This can be done in any program that can do a pattern fill and save as GIF. You could also skip much of this by simply downloading my red checkerboard 50x50 pixel file and simply changing the pallete to change the color, and save out as a transparent GIF.

Here it is to make it easier, just Right Click (Option Click on a Mac) and select Save Image:

Now just insert in the Table code inside the <TD> tag as a background image like this:

<TD BACKGROUND="TransparentRed1.gif">
It is much easier to read text on a more contrasting background.

However, small font sizes may suffer with this technique.
</TD>

If you would like to encourage me to continue writing tutorials of this nature, you may donate an amount of your choice via PayPal. Credit Card donations don't require a PayPal account.

Home