This is a simple tutorial to explain how to implement semi-transparent backgrounds for your HTML elements in all browsers. By now, most people are probably aware of the fact that you can use 24-bit PNG images to create semi-transparent backgrounds in newer browsers. However, because a large percentage of Internet users have still not adopted Internet Explorer 7; which means that they’re still using IE6, which doesn’t support 24-bit PNG images, we have to find a way to mimic that behavior. It should be noted that the fix described in this tutorial is only applicable to solid color backgrounds; it cannot be applied to backgrounds that include some sort of image.
The Bad Fix
Before I came across this fix, here is an example of what I was doing to assign a cross-browser, semi-transparent background to my HTML elements. For the purposes of this example, let’s say that my div with the transparent background has an ID of “t-div” and the text that is intended to show up inside of that div has an ID of “t-div-text.”
- In my normal style sheet (applied to all browsers), I would assign a 1px x 1px semi-transparent PNG image as the background of my div. That would look something like:
div#t-div { background: url('/path/to/my/transparent/image.png'); } - Then, in an IE6-specific style definition (created using the IE conditional comments), I would remove the background of that div. That would look something like:
<!--[if lt IE 7]> <style type="text/css"> div#t-div { background: none; } </style> <!--[endif]--> - Then, using conditional comments, I would create an image before my “t-div” that would display as the full size of the area I wanted to fill with semi-transparency. That would look something like:
<!--[if lt IE 7]> <img id="ie-t-img" src="/path/to/my/transparent/full-sized/image.png" mce_src="/path/to/my/transparent/full-sized/image.png" /> <![endif]--> <div id="t-div">...
- Next, within the conditional comments I added to my style definitions, I would assign a width and height to my PNG image that I just created (“ie-t-img”), making sure that it was set to display as a block-level element so that the “t-div” breaks to the next line.
- Then, I would assign a negative top margin to my “t-div” to move it back over top of the transparent image.
- As a result of turning my semi-transparent PNG image into an HTML “img”, my javascript file that I use to fix the PNG transparency in IE6 would take over, and would make the image transparent.
Obviously, that’s a very messy fix. However, I’ve since found a much more elegant way of applying semi-transparent backgrounds in all browsers.
The Good Fix
Actually, I am going to show you three different ways of assigning a semi-transparent, solid-color background and I will explain which browsers support each method. Then, based on your own experience, I will let you decide which combination of these methods you want to apply to your pages.
DXImageTransform
This method only works in Internet Explorer (versions 5 and above, I believe). To assign a semi-transparent background to an HTML element, you will use the “filter” CSS property. I suggest putting these style definitions inside of conditional comments.
To do so, you first set the background property to “transparent.” Then, you will add a “filter” definition, using the gradient filter in IE. An example would look like:
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000); /*AARRGGBB*/
Finally, you need to assign some sort of style attribute that will trigger the “hasLayout” property in IE. The most effective way to do this (without potentially messing up your site layout) is to assign “zoom: 1” to the element.
In IE, this method actually creates a gradient between your “background” and the contents of the HTML element. Because this gradient is being placed between your background and your contents, you need to set the “background” property to transparent. If you do not, that background will show up behind the new gradient element you’re creating.
If you set the starting color and the ending color to the same value, the “gradient” will actually be a solid color rather than a gradient.
The nice part about this particular filter is the fact that it allows you to set an alpha value to the starting and ending colors. That alpha value is in the same format as your hexidecimal colors (ranging from 00 to ff).
The color values shown in the example above are arranged in the following order:
- The first two characters indicate the “alpha” value of the color
- These values range from 00 – fully transparent to ff – completely opaque
- The third and fourth characters indicate the “red” value of the color
- The fifth and sixth characters indicate the “green” value of the color
- The last two digits indicate the “blue” value of the color
Works in: All versions of IE (from version 5, I believe, through the newest versions)
Does not work in: Any non-IE browser (due to the fact that it uses a proprietary MS property)
RGBA
RGBa is a CSS3 method that allows you to specify colors in “red, green, blue, alpha” rather than using hexidecimal or just RGB values. It’s very simple to apply RGBa to any element (simpler than using hexidecimal colors for some people). All you need to do is specify values between 0 and 255 for red, green and blue, then specify a decimal value between 0 and 1 for the “alpha” channel.
Here is an example that will create a red background with 60% transparency.
background: rgba(255, 0, 0, 0.6);
Works in: Firefox 3, Safari (versions newer than 3.21), Google Chrome and a few more.
Doesn’t work in: any version of Internet Explorer (not even IE8), Opera (at least, not as of this posting, at which time Opera 9.6.3 is the current version), Netscape, SeaMonkey, etc.
It should be noted that, while only browsers that have begun to implement CSS3 support will allow you to use RGBa, almost all modern browsers support RGB, which means that you can declare your colors in a “255, 255, 255” method rather than using hexidecimal values.
Transparent PNG Images
The standard method of applying semi-transparency is to utilize a 24-bit PNG image. These images are very easy to create using any image editor and can be applied simply using the background-image CSS property (although you can also use semi-transparent PNGs as regular images using the img HTML tag).
Works in: Pretty much everything except for versions of IE older than IE7
Doesn’t work in: IE6 and older
Notes about IE6 PNG implementation: It is certainly possible to force PNG transparency using various javascript hacks in Internet Explorer 6 and earlier. However, it should be noted that most of the hacks I’ve come across up until now only apply to HTML images and will not work with background images. Of the ones that do work with background images, there are usually bugs that cause any links on top of the background image not to work (and, sometimes, will even place the background image in the foreground).
Credits
Much of the information presented in this tutorial was collected from the following resources:
- The Gradient Filter on scriptfx.com
- Implement RGBA() colors for modern web browsers on HedgerWow
- RGBa Browser Support on CSS Tricks