January 18, 2010

Transparent Background

The black transparent backgrounds for the site below were done using the CSS3 rgba property. rgba was also used for link hover states and for the footer background.

background: transparent url(RWImages/blkbkgnd.png); /* IE 7 & 8 */
_background: #000; /* IE 6 and below */
background: rgba(0, 0, 0, 0.8); /* All other browsers */

It was easier to get background transparency and text with no transparency to work with a 10px transparent black png for IE than to use the proprietary IE filters. For IE 6,  iepngfix.htc from http://www.twinhelix.com was used for the header and link pngs, but the pages were slow loading when used for the background, so the background for IE6 is not transparent. It still looks good though. Progressive enhancement really does work, as long as you don’t mind a different look for IE and other browsers.

0
Comments (View)
blog comments powered by Disqus