search

louisremi / background-size-polyfill

Adds support for background-size "cover" and "contain" to IE8
http://louisremi.github.com/background-size-polyfill/
MIT License
1.26k stars 359 forks source link

Doesn't work. Repeats background instead of cover. #9

Open Jakobud opened 11 years ago

Jakobud commented 11 years ago

I can't seem to get this polyfill to work take a look here:

http://www.huebnerpetersen.com/mtm/index.php?r=main&id=72

You can view it in Chrome to see what it is supposed to look like. But in IE, the picture of the family does not cover the element as it's supposed to.

The element in question is: #main-content-container. The css:

position: relative;
z-index: 50;
width: 496px;
min-height: 521px;
max-height: 521px;
margin-left: 0px;
margin-right: 0px;
padding: 0px 0px 0px 0px;
overflow-x: hidden;
overflow-y: hidden;
background-size: cover;
-ms-behavior: url(../backgroundsize.min.htc);

and an inline style for the background image: background-image: url("gallery/chris_brown.jpg");

backgroundsize.min.htc is here: http://www.huebnerpetersen.com/mtm/backgroundsize.min.htc

For some reason the background does not get covered. It repeats instead. I added background-repeat: no-repeat and that gets rid of the repeating, but the background still does not cover the element.

Any thoughts on this?

louisremi commented 11 years ago

The backgroundsize.min.htc file should be referenced with an absolute URL: url(/mtm/backgroundsize.min.htc)

Jakobud commented 11 years ago

That didn't seem to make a difference. Thanks though.

MikeSV commented 11 years ago

Did you remember to add the MIME type to your .htaccess file?

jefferyto commented 11 years ago

Can you try version 0.2.0 to see it makes any difference?