Web Page Image Blending

WARNING: This blog entry was imported from my old blog on blogs.sun.com (which used different blogging software), so formatting and links may not be correct.

I recently saw a Creator application somebody had made. It used a lot of background images, with text right on top of the backgrounds.
It looked nice, but it was hard to read the text. I suggested the user insert translucent masks between the text and the background. Then I realized that might make a good blog entry, since there are lots of little tricks to know about. So here goes.

Let's say you have a page which looks a little like this (click for full size):

Notice how there is a text component at the bottom, for "Previous" and "Next" links. It's blending a bit with the background and is hard to read. What we want is to place a semi translucent rectangle behind this text, such that the background is still visible, but at the same time increasing the contrast between the white text and the photograph. Let's do that, by inserting a Graphic Image component that is simply a translucent gray block:

Much better, right? (Yes, I inserted two more blocks showing 30% transluceny and 50% translucency, for comparison).

Doing this is pretty easy. The first thing you'll need is a translucent image. Here's a couple:

50% translucency	30% translucency

Just right click on one and choose save as. Don't forget that you can drag it right to the designer. If you don't want to use one of these images, you can generate your own translucent image. It has to be in the PNG format, since GIF does not support translucency, only 100% transparency (e.g. opacity is either 0 or 1, not anything in between). You can use the http://apps.everamber.com/alpha/ web site to generate a suitable image, choosing your own color, size and transparency values.

Next, you'll need to ensure that the translucent image is the right size. It should be positioned right behind the text, and be slightly larger (e.g. such that it's a "bounding box"). These tips might help you:

• You probably want to temporarily disable the snap to grid feature when dragging, such that you can place the rectangle top left corner precisely outside of the text top left corner. To do that, hold the Shift key while dragging and until you've released the mouse button. With the shift key pressed all dragging is per-pixel rather than per-grid-cell.


• When you resize the image, don't drag the corner handles! Corner handles will ensure that all image aspect ratios are preserved. However, in this case we simply want to tile/stretch the translucent image to our exact right size. Therefore you should use the resize handles in the middle of the horizontal or vertical edges, not the corner edges.

Next, you'll need to ensure that the translucent image is behind the text. You can do that by setting the z order CSS property on the image and on the text component. But a much easier way to do it is to simply ensure that the image component appears earlier in the markup than the text. Do that by simply looking in the application outline, and dragging the image component up such that it preceeds the text component. When you do that you should immediately see the translucent image dimming the background image, but not your text.

Finally, for completeness, perhaps I should mention how you use background images in your pages. First, add the desired image to your web app (remember you can drag it on the designer - if you do, just delete the resulting graphic image component, and the image file itself will still be in your resources folder). Then open your stylesheet.css and add this rule:

body {
background-image: url(wallpaper1.png);
}

This should look fine in the browser too - here's how Safari renders it:

Note however that you may not be as lucky with Internet Explorer! IE7 is reported to have great support for transparent PNGs. But earlier versions of IE were notoriously bad. There are however workarounds, and I -believe- our image component implements this workaround, by detecting when it's talking to IE and emitting various gross CSS (such as "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=...."). It would be nice to get confirmation from somebody whether this works since I don't have IE on this operating system. But I'm pretty sure it does, and this is why you want to use components - somebody else has debugged the various necessary browser workarounds, and browser specific markup is generated based on which client the server is talking to!