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

Image does not appear #15

Open abidingbear opened 11 years ago

abidingbear commented 11 years ago

I cannot seem to get the polyfill to work. When viewed in ie8 the background image is not appearing. Any advice you can give would be appreciated.

jefferyto commented 11 years ago

Can you post a link?

xavio commented 11 years ago

I'm having the same issue, somewhat related to https://github.com/louisremi/background-size-polyfill/issues/11

IE8 says that there's a bunch of invalid arguments and wont display the pictures.

jefferyto commented 11 years ago

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

codeofsumit commented 10 years ago

i have the same issue, but the image appears if i resize the browser window.

jefferyto commented 10 years ago

@Sumit8 Can you post a link or jsFiddle with your issue?

codeofsumit commented 10 years ago

unfortunately i can't give you access to the current project and as we're finalizing it right now, i don't have time to build a jsFiddle just yet (also, how to test jsFiddle-content in IE8? The site does not work there). But i'll defenitely give more feedback regarding this issue after this project

timtempel commented 10 years ago

Same problem here but it only occurs when you have the background element in a div which is hidden and displayed later on. I created a Fiddle but I can't open it in IE so here is the simple output (test.html): (it occurs in IE 9 and below)

p.s. backgroundsize.min.htc must be in the same folder as test.html

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script>function test(){$('#test').fadeIn();}</script>
<div style="background-image:url(http://s2.djyimg.com/n3/eet-content/uploads/2013/11/GOLD-TREE-shutterstock-119376553-WEBONLY.jpg);width:300px;height:180px;-webkit-background-size:cover;-moz-background-size:cover;background-size: cover;background-repeat:no-repeat;-ms-behavior: url(backgroundsize.min.htc);behavior: url(backgroundsize.min.htc);"></div>
<div id="test" style="display:none;position:relative;">
    <div style="background-image:url(http://www.tea4you.nl/media/catalog/product/cache/2/thumbnail/500x500/9df78eab33525d08d6e5fb8d27136e95/d/i/diverse-fruit_21.jpg);width:300px;height:180px;-webkit-background-size:cover;-moz-background-size:cover;background-size: cover;background-repeat:no-repeat;-ms-behavior: url(backgroundsize.min.htc);behavior: url(backgroundsize.min.htc);"></div>
</div>
<a onmouseover="javascript:test();">Hover here</a>
jefferyto commented 10 years ago

@timtempel does this help? https://github.com/louisremi/background-size-polyfill/issues/31#issuecomment-27583864

timtempel commented 10 years ago

Sorry, my bad! I didn't browse through the closed section, it's fixed now. Thank you!

timtempel commented 10 years ago

Great work by the way!

jefferyto commented 10 years ago

@timtempel thanks :-) I should probably include that info in the README or somewhere more visible

sunxiaoyun21 commented 7 years ago

有人解决这个问题么，我在css中也用了"-ms-behavior: url(css/backgroundsize.min.htc), behavior: url(css/backgroundsize.min.htc ，也执行了，就是页面上是没有任何图片的