Forums
View unanswered posts | View active topics It is currently Fri Oct 24, 2014 2:32 pm



Reply to topic  [ 4 posts ] 
 backgroundSize.js with PIE border-radius 
Author Message

Joined: Mon Nov 05, 2012 3:44 pm
Posts: 3
Post backgroundSize.js with PIE border-radius
I've been having trouble getting backgroundSize.js to work with PIE, specifically for the border-radius parameter.

Here is backgroundSize.js:
http://louisremi.github.com/jquery.back ... e.js/demo/

It's basically a jquery shiv for background-size in IE 8-.

border-radius breaks here when backgroundSize.js is turned on:

div {
background-image: url('image.gif');
background-size: cover;
border-radius: 10px;
behavior: url('/PIE.htc');
position: relative;
}

Has anyone else had luck with this?


Mon Nov 05, 2012 3:47 pm
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1446
Post Re: backgroundSize.js with PIE border-radius
Not gonna work. That shim uses the proprietary IE filter property, which completely screws up transparency which PIE needs to function properly.

Your best bet is to wait for background-size support in PIE (it's already implemented in the master branch, just not yet in an official release), or to not use rounded corners.


Mon Nov 05, 2012 4:14 pm
Profile

Joined: Mon Nov 05, 2012 3:44 pm
Posts: 3
Post Re: backgroundSize.js with PIE border-radius
I downloaded the "Version 2.0beta1-SNAPSHOT" master branch, but can't seem to get background-size to work at all, or -pie-background-size. Am I doing something wrong? I know PIE uses shorthand for everything... is it clumped into the background property? Like this: background: url('image.gif') top center / contain no-repeat;

Thanks!


Mon Nov 05, 2012 6:34 pm
Profile

Joined: Mon Nov 05, 2012 3:44 pm
Posts: 3
Post Re: backgroundSize.js with PIE border-radius
Finally got it. I agree with others that background-size should be supported instead of just shorthand. I have a cms which dynamically outputs background-image parameters in a separate file than my main CSS file. Currently with PIE2, I have to either define it entirely inline, or entirely in my main CSS (which isn't possible here). This would be solved by adding a background-size parameter.

Here was my solution:

background: url('/assets/logo.png') center center / contain no-repeat;
-pie-background: url('/assets/logo.png') center center / contain no-repeat;

For now (and I'm sure this will change later), it's required that you duplicate the background parameter and use the prefixed -pie- variant for this to work.

Thanks!


Mon Nov 05, 2012 7:13 pm
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 4 posts ] 

Who is online

Users browsing this forum: Bing [Bot], Yahoo [Bot] and 2 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:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.