CSS Opacity Issues

Short story: Last week I was building out a small website. I needed a transparent background for a div that was holding a good deal of content. My first thought was to simply apply the classic CSS opacity property. I did not realize at the time that the parent->child relationship of the div to the content would force the content to inherit the opacity as well. The site was urgent, so I didn’t have time to look for an answer to my problem (and still haven’t bothered to).

My solution: A .png with transparency as a repeating background image to the div.

Now, it took me a few tries to nail down the exact shade (of grey) that I wanted. Not that it is that much more work, but I had to keep returning to Photoshop to tweak and resave until I had the proper tone.* I thought, “Wouldn’t this be nice if I could just make minor CSS changes to find the proper tone?”

I put together a pack of 45 swatches to tile on backgrounds in the future to save time (download link below).

I’ll quickly explain how it works. It is pretty straight forward. I used 5 greys (well…4 greys and black) – #000, #333, #666, #999, #CCC. Each of those 5 had a 90%, 80%, 70%, etc… opacity applied and then optimized and saved as .png with transparency. 5 greys x 9 opacities = 45 pngs. The naming convention I used is color_opacity.png (for example, #333 at 60% opacity is “333_60.png”).

For selecting proper bg color – drag pngs into your image folder and change the css to reflect whatever color you want. Of course, when you figure it out – delete the others. I’m assuming you have a basic understanding of CSS and how to apply and tile a background image.

Oh, one last thing – if you are concerned about support for all browsers, don’t forget to include a fix for IE. I use (and recommend) http://www.twinhelix.com/css/iepngfix.

DOWNLOAD LINK: http://bradleykenyon.com/downloads/grey_png_pack.zip

*I know, I know…this is something that should have been taken care of in the design phase. I wasn’t the designer for it and all I was given was, essentially, a sketch of general placement and approximate colors.