CSS3 PIE Forums
http://css3pie.com/forum/

backgroundSize.js with PIE border-radius
http://css3pie.com/forum/viewtopic.php?f=3&t=1838
Page 1 of 1

Author:  aaren [ Mon Nov 05, 2012 3:47 pm ]
Post subject:  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?

Author:  jason [ Mon Nov 05, 2012 4:14 pm ]
Post subject:  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.

Author:  aaren [ Mon Nov 05, 2012 6:34 pm ]
Post subject:  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!

Author:  aaren [ Mon Nov 05, 2012 7:13 pm ]
Post subject:  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!

Page 1 of 1 All times are UTC - 7 hours [ DST ]
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
http://www.phpbb.com/