background-image + rgba() with fallback in IE 7-8

Question

I've got an element that has background image and transparent background color. I want IE to fall back to solid color.

.element {
    background: url(image.png);
    background-color: #000; /* should be IE fallback */
    background-color: rgba(0,0,0,0.5);
}

Seems like a simple question, but I can't find any solution for it. Some solutions work only in IE7, some only in IE8.

Answer 1

To write CSS rules specificially to IE8 or below, add a backslash and 9 (\9) at the end before the semicolon.

example: background-color:#000\9;

source

Answer 2

Try this:

.element {
    background: url(image.png);
    background-color: #000; /* IE 8 */
    background-color: rgba(0,0,0,0.5);
    *background-color: #000; /* IE 7 */
}