/background-size-emu

Emulate background-size for IE6, IE7, IE8 and IE9 in quirks mode.

Primary LanguageJavaScript

background-size-emu readme
===================
The JS library that emulates background-size for IE6, IE7, IE8 and IE9 in quirks mode.

Description:
I suffered to much from IE8 not supporting background-size and decided to change that.
Then I accidentally run into https://github.com/louisremi/background-size-polyfill project, that adds support of background-size via adding -ms-behavior: url(/backgroundsize.min.htc); into element together with background-size.
Sadly, it didn't worked in some cases, like IE8 in quirks mode. Also, I though that htc solution were very uncomfortable.

I decided to write own *.js library that would be much simpler to use, via referencing lib.
I TELLING EVERYONE that I used IDEAS from background-size-polyfill, but coded EVERYTHING in my own way, so you can't really tell that I stole someone's code. My code is similar to background-size-polyfill code in around 10% (algorithm for inner image position calculation).

Now I ready to share that lib with everyone.

How to setup:
Simply add <script type = "text/javascript" src = "background_size_emu.js"></script> to your page and it will solve all problems for you!

How it works:
It periodically scans for DOM elements changes and, if element with background-size found, it inserts into it DIV with IMG inside.
It reacts to window resizes and fix image size.
It reacts for elements sizes changes, without window size change

Library possibilities:
It can check IE version and disable self if it IE >= 9. However, it will not disable self if IE9 in quirks mode (also no support for background-size).
It support element dynamic size changes (when no page resize event is fired).
It support body as background target.
P.S. For some unknown for me reasons, if P display property is not set to inline, the background image appears in it's middle :O

!>>>It can't emulate background-size for elements that can't have children and TR.<<<!
It does not support background-repeat, so only single image is placed in target element.

Links:
Project page: http://bg-sz-emu.somee.com
Live demo page (view in IE6 - IE8): http://bg-sz-emu.somee.com/test.html
Supported elements page (view in IE6 - IE8): http://bg-sz-emu.somee.com/supported_elements.html

Donations:
If you found my library useful and it saved your time and efforts, please, consider donating me something. Even 1 USD is fine :O

Donate with Paypal