How to Adjust the Opacity of a Form’s Background

UPDATE: Now you can specify the transparency level directly in our updated Form Designer.

Sometimes, instead of having the background of a form fully transparent or opaque, we would like something in between. For example, the form on this page has a black background whose opacity is set at 60%. The effect was accomplished by first setting the background to “transparent” via the form builder’s Preferences and then injecting a special CSS rule. Here’s a page containing a different form whose background has the same degree of opacity but a different color. This article explains how to edit the injected CSS to adjust both a form’s background’s opacity and color.

Here’s the CSS that was injected into the first form.

The First Declaration

As you’ve probably guessed, “rgb” is short for “red green blue“: the three primary colors. So “background:rgb(0, 0, 0);” simply means that the color of the background has no red, no green and no blue, making it black. Each parameter ranges from 0 to 255, meaning that 16,777,216 colors are possible (256 * 256 * 256).

The Second Declaration

This is similar to the first declaration, except that it includes a fourth parameter to set the opacity which ranges from 0.0 to 1.0. “0.0” is full transparency (same as no opacity) and “1.0” is no transparency (same as full opacity).

Declarations 3 to 5 (must be included to accommodate various versions of Internet Explorer)

There must be NO changes made to the third declaration: “background:transparent9;” If you notice that the backslash before the 9 is missing when you return to the Form Styles tab of the Preferences, make sure you replace it before closing the Preferences. Save the form when done.

Declarations 4 and 5 each contain two identical hexadecimal values (each containing 4 pairs of alpha-numeric characters, excluding the hash symbol) that must be changed when adjusting the color and/or opacity of the background. Moreover, all four values must match each other. In each hexadecimal value, the first pair of characters set the opacity; the second pair, the red level; the third, the green level and the fourth, the blue level. You may have noticed that whereas in the second declaration, the opacity is set by the rightmost parameter, in these fourth and fifth parameters that property is set by the leftmost pair of characters. It’s one of those gotchas of which one needs to be mindful.

For a consistent appearance across browsers, the opacity and color settings in the fourth and fifth declarations must be equivalent to those in the first and second declarations. (Of course, as stated earlier, the first declaration has no opacity setting.) There are several online tools to convert RGB values to their hexadecimal equivalents but here’s a good one. As to converting the opacity in the second declaration to it’s hexadecimal equivalent, the figure (there are nine of them: 0.1, 0.2, 0.3… 0.9) first needs to be multiplied by 255 and then the result entered into the “Decimal” box here. After entering the number, hit [Return] ([Enter]). The two characters that appear in the “hexadecimal” box are those that should replace the first pair of characters in the hexadecimal values in declarations 4 and 5. For your convenience, the conversions are listed below:

• 0.1 == 25
• 0.2 == 33
• 0.3 == 4C
• 0.4 == 66
• 0.5 == 7F
• 0.6 == 99
• 0.7 == B2
• 0.8 == CC
• 0.9 == E5

The two extremes of the scale (“0.0 == 00” and “1.0 == FF”) were purposely omitted because the former produces full transparency which makes setting the color useless, while the latter produces full opacity negating the need to set the color with injected CSS (adjusting the background color via the “Background” box found on the same tab of the Preferences would be sufficient).

Armed with the above information, it should now be clear why altering the injected CSS in the first form to this should produce a form with a background like the second example.

See also:

• How to Make the Background of a Form Transparent
• How to Compensate for IE6’s Lack of Support for Transparent PNGs