I have been struggling to combine transparent background image with rgba and get it working in ie 8, 7 etc. SO I thought I would share my findings in case someone else is having the same issue.

First of all I was using syntax that supports multiple background images as shown here:

http://www.w3.org/TR/css3-background/#backgrounds

However when trying this technique and combining it with -pie-background selector, I did not get the result I was looking for, namely displaying both a rgba color and a background image. In effect something like this:

background-color: rgba(0, 255, 255, 0.6);
background-image: url(../img/ribbon-add-to-browser-dark-18x18.png);
-pie-background:url(../img/ribbon-add-to-browser-dark-18x18.png);
background-position: center left;
background-origin: border-box;
background-repeat: no-repeat;
behavior: url(PIE/PIE.htc);

This effectively just showed the the background image without the rgba color overlay or background.

Swapping around the background-image and color variables seems to produce the same result.

i.e.

background-image: url(../img/ribbon-add-to-browser-dark-18x18.png);
-pie-background:url(../img/ribbon-add-to-browser-dark-18x18.png);
background-color: rgba(0, 255, 255, 0.6);
background-position: center left;
background-origin: border-box;
background-repeat: no-repeat;
behavior: url(PIE/PIE.htc);

I was just about to give up on this when I stumbled across the following article, although about something slightly different, seemed to show that what I wanted was at least achievable without having to wrap my menu in a wrapper like a li in order to style it correctly:

viewtopic.php?f=3&t=1276

Therefore I tried this again and have managed to combine using CSS3PIE to not only support rgba and transparent background images without having to use a wrapper using the following syntax:

background: url(/rgba/img/ribbon-add-to-browser-dark-18x18.png) center left no-repeat rgba(0,0,255,0.5);
-pie-background: url(/rgba/img/ribbon-add-to-browser-dark-18x18.png) center left no-repeat rgba(0,0,255,0.5);
behavior: url(/rgba/PIE/PIE.htc);

I guess the thing is to use 'background' rather than separate background-image, background-color, background-repeat and background-origin.

Hope this helps someone.

Just to follow this up, kind of loosely related, it appears that you cannot combine drop shadow and rgba on one element:

Reference here:

http://css3pie.com/documentation/suppor ... -features/

Also I have discovered that if using a -pie-background, I seem to only be able to show properly if the image in question is linked absolutely. i.e.

-pie-background: url(/pie_test/img/ribbon-add-to-browser-dark-18x18.png) center left no-repeat rgba(0,0,255,0.2);
behavior: url(PIE/PIE.htc);

works

while

-pie-background: url(../img/ribbon-add-to-browser-dark-18x18.png) center left no-repeat rgba(0,0,255,0.2);
behavior: url(PIE/PIE.htc);

does not?!