
combining transparent background image with rgba background
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/#backgroundsHowever 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=1276Therefore 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.