View unanswered posts | View active topics It is currently Tue Sep 17, 2019 3:28 pm

Reply to topic  [ 6 posts ] 
 Background-Image an Gradient doesn't work together 
Author Message

Joined: Sun Feb 10, 2013 6:50 am
Posts: 4
Post Background-Image an Gradient doesn't work together

at first: PIE is an great Project :-)
I Like it very much because it helps to use the most important CSS3-Featueres in a very comfotable way. And it ist working stable so I didn't need a lot of help out of the documentation yet. So a big Thank You first of all :-)))))

I am not quite sure if this is a problem in PIE2Alpha or if I am wrong myself.

In the CSS are a gradient-color and a background-image given together for an element.

Following CSS:

#infobar-outer {
   position: relative;
   color: #DDDDDD;
   background-color: #4B5B71;                /* Fallback Non-CSS3-Browsers */
   background-image: url(bg_relieflinie_infobar.png);    /* Fallback Non-CSS3-Browsers */
   background-repeat: repeat-x;            /* Fallback Non-CSS3-Browsers */
      url(bg_relieflinie_infobar.png) repeat-x,
      -webkit-linear-gradient(-75deg, #5F6D7F, #4B5B71 25%,#4B5B71 78%, #5F6D7F 95%);        /* Chrome10+, Safari5.1+ */
      url(bg_relieflinie_infobar.png) repeat-x,
      -moz-linear-gradient(-75deg, #5F6D7F, #4B5B71 25%,#4B5B71 78%, #5F6D7F 95%);       /* firefox 3.6+ */
      url(bg_relieflinie_infobar.png) repeat-x,
      -o-linear-gradient(-75deg, #5F6D7F, #4B5B71 25%,#4B5B71 78%, #5F6D7F 95%);          /* opera 11.10+*/
      url(bg_relieflinie_infobar.png) repeat-x,
      linear-gradient(165deg, #5F6D7F, #4B5B71 25%,#4B5B71 78%, #5F6D7F 95%);          /* future browsers*/
      url(bg_relieflinie_infobar.png) repeat-x,
      linear-gradient(165deg, #5F6D7F, #4B5B71 25%,#4B5B71 78%, #5F6D7F 95%);         /* PIE: IE6-9 */
   behavior: url(;                     

The Problems are:

- IE9 shows the gradient but not the Background-Image
- IE7+8 doesn' show both (no background-image and no gradient) and doesn't also show now background-color btw. a white background-color instead
- IE6 is not relevatn to me
Tested with IE-Tester

Without the background-image al the IEs shows the Gradient-Color proper
Without the gradient the IEs shows the Background-Image proper

Can it be a Problem with this combination in PIE2Alpha or am I wrong in my Code?

Known Issus:
The Element which ist designed by PIE has position relative ;-)

Yout can visit the Page with deactivatede PIE for the special Element (#infobar-outer) on:

Thanks for every tip.

Last edited by Yetiie on Sun Feb 10, 2013 10:01 am, edited 1 time in total.

Sun Feb 10, 2013 7:16 am

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1452
Post Re: Background-Image an Gradient doesn't work together
Your link is a 404, I assume it's just a typo and the k and e are transposed.

I can't easily diagnose the issue if you have it commented out, could you make it available with PIE and the -pie-background enabled?

Have you tried testing with a tool other than IETester? That has known inaccuracies. See viewtopic.php?f=4&t=1206

Sun Feb 10, 2013 8:43 am

Joined: Sun Feb 10, 2013 6:50 am
Posts: 4
Post Re: Background-Image an Gradient doesn't work together
Hi Jason,

thx for your fast answer.

Sorry for the broken Link. I corrected it. Here it is once more to have a nearer look:
Element is: #infobar-outer

And I have made CSSPIE work so you can take a deeper look.
It's a public page and I won't will let it be with the broken view for a longer time ... ;-)

Thx for the information to IE-Tester.
Yes I know, it's not the best. But my experience is, that it almost works good enough ... just have a look to the cache ;-)
Do you have a Tipp what is the best possibility to test the older IE-Versions?

Due on your recommendation I tested it special on another system with an origina IE 8 ... (my only older IE)
Same view/problem as shown in IETester so I think the problem is real :-(

I am thankful for any Idea.

Sun Feb 10, 2013 10:32 am

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1452
Post Re: Background-Image an Gradient doesn't work together
For the IE9 issue, I think this is because you're not accounting for the relative-path issue. See ... tive-paths under "URLs in PIE-interpreted CSS properties" -- any relative URLs within -pie-background must be relative to the page not the CSS file.

For IE8, it looks like there might be a PIE bug where it's not handling the initial render correctly. If I force it to update by setting a height on the infobar-outer element in the developer tools, then the gradient is rendered. I'll have to look into this more. In the meantime, does PIE 1.0 work correctly or does it have the same problem?

Sun Feb 10, 2013 2:43 pm

Joined: Sun Feb 10, 2013 6:50 am
Posts: 4
Post Re: Background-Image an Gradient doesn't work together
Hi Jason,

thx for your help.

Testing has changed a little bit:
Now I have the possiblility to test directly in the IE-Versions IE7-9 (not only IE8) :-)
But even as IETester is reported to be a little bit buggy I can report in this case, that the behavoir of IETester in this case is identical with the original browsers. Indeed the performance became better with the last version.


I tested a lot and reported in this further posting.
But only after testing I unterstood, that Jason give the correct answer ... but I didn't get it directly.

For the solution of the problem see the following posting.
This posting is edited. I delete the reporting cause it depends on a wrong indeed not working property:
Relative instead of absolut pathes.


[ report is deleted >>>>> see next posting ]

Last edited by Yetiie on Mon Feb 11, 2013 10:29 am, edited 2 times in total.

Mon Feb 11, 2013 8:04 am

Joined: Sun Feb 10, 2013 6:50 am
Posts: 4
Post Re: Background-Image an Gradient doesn't work together
Hi Jason,

sometimes it ist so easy that you don't see the next.
Only after all the tests I understood your comment.

The relative/absolute path indeed was the correct solution:

As given in my first answer I understood, that the relative pathes were concerning the PIE-Files only. Only after I had done the hole tests I checked once more and understood your comment the correct way: The background-images in the pie-background has to been given with asolute pathes too ...

That way PIEv2alpha indeed works correct :-)
linear-gradient-color and background-image works fine together.

For all who are looking for the similar problem, - this code is the correct one and works in IE7-9:

-pie-background: url( _path.../background-image.png) repeat-x,  linear-gradient(165deg, #5F6D7F, #4B5B71 25%,#4B5B71 78%, #5F6D7F 95%);
   behavior: url(;

[EDIT - Important: The code in -"pie-background:..." has to be placed in one line, if it is separated in different lines as shown in first posting PIE doesn't accept it as it is reported in this posting. To be detailed: This solution works in PIEv2alpha. In PIEv1 it works for IE7-8, but not in IE9. A good reason to change to V2 :-)]

I apologize for the big tests in the older posting before ...
... but as written: Sometimes you don't see the easy solution.

So: thank you for yout help.
PIE is a great tool ...
... and the users are somtimes very slow ;-))))

Mon Feb 11, 2013 9:34 am
Display posts from previous:  Sort by  
Reply to topic   [ 6 posts ] 

Who is online

Users browsing this forum: No registered users and 1 guest

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:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.