Forums
View unanswered posts | View active topics It is currently Sat Oct 25, 2014 7:04 pm



Reply to topic  [ 2 posts ] 
 combining transparent background image with rgba background 
Author Message

Joined: Fri Mar 11, 2011 9:49 am
Posts: 8
Post 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/#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.


Wed Aug 22, 2012 9:06 am
Profile

Joined: Fri Mar 11, 2011 9:49 am
Posts: 8
Post Re: combining transparent background image with rgba backgro
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?!


Fri Aug 24, 2012 4:32 am
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 2 posts ] 

Who is online

Users browsing this forum: Google [Bot], Yahoo [Bot] and 3 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
cron
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.