Managing background colors and opacity in IE6, IE7 and more advanced browsers

So you want to make a background color that has a certain opacity, but then, after being astounded that people still use Internet Explorer 6 and 7, you discover that IE6 and IE7 can’t handle opacity. Thus, you must have a nice fallback — some color that kicks in for IE6 and IE7.

Oh, and you’re doing this in a way that uses the cascade — your adding a background color with an additional class further down your stylesheet, because you want to customize the same div different ways when it appears throughout your page.

Something that looks like this in your HTML:

Hello, I'm tweaked version 1
Hello, I'm tweaked version 2

Using background and background together is what you need. This is the CSS you want:

.original {
font-size: 20px;
width: 100px;
height: 200px;

.tweakedVersion1 {
background: rgb(168, 79, 119); /*IE6, IE7 pick up this */
background: rgba(168, 79, 119, .75); /* more advanced browsers grab this */

.tweakedVersion2 {
background: rgb(55, 55, 55); /*IE6, IE7 pick up this */
background: rgba(55, 55, 55, .75); /* more advanced browsers grab this. IE6 & 7 are like, 'Whaaaaaaat?' */

These do NOT work:

.tweakedFail1 {
background-color: rgb(168, 79, 119); /*IE6 and 7? Nope! */
background-color: rgba(168, 79, 119, .75);

.tweakedFail2 {
background: rgb(101, 68, 107); /*IE6 and 7? Nope! Not if background-color is below!*/
background-color: rgba(101, 68, 107, .80);

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.