One of the major things limiting Responsive Web Design for IE is the lack of support for advanced background properties. Most notably: background-size.

If background-size was available in CSS3Pie, holy cow would that be a game changer. Scalable, flexible, adaptable websites would all be possible! What do you think?

I believe VML supports sizing of background image fills so this *shouldn't* be too difficult. My plate's pretty full at the moment but if someone from the community wanted to step forward to work on it that would be great!

I also would really like to have this feature.

I've been hunting for a solution that provides IE6 - IE8 the ability to support the following:
background-size: 10em 10em;

This would allow one to have dynamic sizing control over background images.

Between -vendor-background-size and filter (IE6-8), one can provide cover support to almost any current browser. I believe the breakdown below is correct.

Firefox 3.6:
-moz-background-size: cover;

Firefox 4, Safari 4, Chrome 4, Opera 10, IE9:
background-size: cover;

IE6, IE7:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your.image.jpg',sizingMethod='scale');

IE8:
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your.image.jpg',sizingMethod='scale')";

Good news for you, background-size has already been implemented in the latest dev code (within -pie-background of course) and will be in the next release.

Awesome. I can't wait. THX.
I'll test it as soon as I'm aware it's available.

I dug around a bit and found the code on GitHub.

1.0b6 Snapshot

Background-Size Test page

All examples that have the / between the location and size fail to display any background properties. I think this is a browser support issue. According to this post on Stack Overflow, current browsers don't support this technique.

I tested the following browsers with the same issue:
[*]Firefox 8
[*]Firefox 7
[*]Firefox 6
[*]Firefox 5
[*]IE 8
[*]Chrome 15
[*]Safari 5.1

Sample Page

True, that testcase doc should probably be updated to separate out background-size as a separate longhand property for those browsers that don't support the slash-notation in the shorthand yet. But that isn't a PIE problem, right?

You had IE8 in your list but it works fine in IE8 for me.

(OK I've updated the testcase doc and it now works in other browsers too. If you find any more feel free to submit a fix.)

Sweet. Thanks for the update.


Correct.

IE8 (8.0.7601.17514 64bit/32bit on Windows 7 64bit SP1) doesn't render correctly.

I'm not sure if I copied the code correctly. Here's my Test Page

None of the border.png images are resized

None of the following tests display the border.png image (white background):
[*]contain, border-box
[*]contain, border-box, bottom right
[*]contain, content-box
[*]contain, content-box, bottom right
[*]cover, border-box
[*]cover, border-box, bottom right
[*]cover, content-box
[*]cover, content-box, bottom right

If you can fix the resizing in IE6-8, I will send some money via Paypal your way.

PIE isn't loading at all on your modified instance of the test page. This might have something to do with the loader and -pie-load-path, I'll take a look.

Here's a screenshot of the test page running for me in my dev environment: http://cl.ly/36211n212l2F3K2S2w1x

I'm very excited to get this working on my server.

Thanks for the quick responses.