All geek questions in one place

CSS background size in IE8, background-size-polyfill not working

I am trying to use the background-size property in IE8 with this promising solution: https://github.com/louisremi/background-size-polyfill

But I get this error: SCRIPT65535: Unexpected method call or access to properties.

Any ideas or alternatives for setting the image size of the background image in IE8?

+4
source share
5 answers

It may be worth noting that polyfill is not designed to work with specific pixel sizes, i.e. background size: 32px 64px

I know this does not answer your question, but for IE 8 I just removed the non-essential backgrounds with this CSS hack (instead of trying to figure out how their size is)

background: none \ 9;

+1
source

try this css code i.e. work dropshadow

body { margin: 0; background: url(images/algeria.jpg) center no-repeat; -ms-behavior: url(backgroundsize.min.htc); } .bgsCover { background-size: cover; } .bgsContain { background-size: contain; } /* this allows to use a second background in all browsers and IE8 */ body:after { content: ""; background: url(images/pattern.png) repeat; position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; left: 0; } /* responsive carousel FTW */ #carousel { height: 45%; width: 50%; margin: 0 auto; background: #0F0808; border-radius: 3px; } #carousel ul { height: 100%; padding: 0; margin: 0; list-style: none; } #carousel li { display: none; height: 100%; background-position: center; background-repeat: no-repeat; background-size: contain; -ms-behavior: url(backgroundsize.min.htc); } #carousel .active { display: block; } /* less interesting stuff below */ html, body { height: 100%; font-family: "Arial", "Liberation Sans", sans-serif; color: #FEE; } h1 { font-family: 'Great Vibes', sans-serif; text-align: center; margin: 0 0 40px; text-shadow: 0 0 2px #222; font-size: 1.7em; font-weight: normal; position: relative; top: 20px; filter: progid:DXImageTransform.Microsoft.Shadow(color=#222222, direction=90); } h1 i { font-size: 1.3em; display: block; -moz-transform: rotate(-15deg); -webkit-transform: rotate(-15deg); -o-transform: rotate(-15deg); -ms-transform: rotate(-15deg); transform: rotate(-15deg); filter: progid:DXImageTransform.Microsoft.Shadow(color=#222222, direction=90); } p { text-align: center; font-size: 1.5em; text-shadow: 0 0 2px #222; /* For IE 8 */ filter: progid:DXImageTransform.Microsoft.Shadow(color=#222222, direction=90); /* For IE 5.5 - 7 */ zoom: 1; color: #CCC } .button { color: #0F0808; text-decoration: none; background: #FEE; border-radius: 3px; text-shadow: none; padding: 4px 8px; }

HTML source code

 <body class="bgsCover"> <h1><i>background-size</i> polyfill</h1> <a href="https://github.com/louisremi/background-size-polyfill"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png" alt="Fork me on GitHub"></a> <div id="carousel"> <ul> <li id="img1" class="active" style="background-image: url(images/algerian1.jpg);"> <li id="img2" style="background-image: url(images/jar1.jpg);"> <li id="img3" style="background-image: url(images/algerian2.jpg);"> <li id="img4" style="background-image: url(images/jar2.jpg);"> </ul> </div> <p>Stretch background image using CSS3 <code>background-size: cover;</code> and <code>background-size: contain;</code>, in IE8 too.<br/> Reacts to resize events for responsive backgrounds and galeries!</p> <p><a class="button" href="https://github.com/louisremi/background-size-polyfill#readme">Instructions</a> - <a class="button" href="https://github.com/louisremi/background-size-polyfill/downloads">Downloads</a></p> <script> /*var images = [ 'algeria.jpg', 'parthenon.jpg', 'propylaea.jpg' ], curImg = 0; document.getElementById("switchImage").onclick = function() { curImg = ( curImg + 1 ) % images.length; document.body.style.backgroundImage = "url(images/" + images[ curImg ] + ")"; }; var sizes = [ "Cover", "Contain", "Auto" ], curSize = 0; document.getElementById("switchSize").onclick = function() { curSize = ( curSize + 1 ) % sizes.length; document.body.className = "bgs" + sizes[ curSize ]; };*/ var items = document.querySelectorAll("#carousel li"), curItem = 0; setInterval(function() { items[ curItem ].className = ""; curItem = ( curItem + 1 ) % items.length; items[ curItem ].className = "active"; }, 3000); </script> </body>
0
source

I have the same problem in IE8. When I copied ".htaccess" to the root folder. It works great.

0
source

Polyfill didn't work for me either. My solution was to use the original "obsolete" version.

 <!--[if lt IE 9]> <script src="//louisremi.imtqy.com/jquery.backgroundSize.js/jquery.backgroundSize.js"> </script> <script> $('.logo').css( "background-size", "cover" ); </script> <![endif]-->
0
source

In fact, an outdated version is not required.

This worked for me when I used behavior instead of -ms-behavior

0
source

Source: https://habr.com/ru/post/1487806/

More articles:


All Articles