Skip to content

Latest commit

 

History

History
95 lines (72 loc) · 3.83 KB

README.md

File metadata and controls

95 lines (72 loc) · 3.83 KB
Raw

background-size polyfill

An IE behavior adding support for background-size to IE8.

Demo

Introduction

Progressive Enhancement is the mantra I live by. It means "Have fun with CSS3 and don't worry about IE8 users; they'll never notice they're missing out on your gorgeous text-shadows and gradients, anyway".

All was well until I discovered the elegance of background-size: cover; and background-size: contain;. The first one, for instance, allows an image to completely cover a background, without having to send a 1920x1080 background image down the pipes.

Unfortunately, they don't degrade gracefully: websites would likely appear broken to IE8 users :-( ...unless you use this behavior!

How to use it?

Upload backgroundsize.min.htc to your website, along with the .htaccess that will send the mime-type required by IE (Apache only — it's built in nginx, node and IIS).

Everywhere you use background-size in your CSS, add a reference to this file.

.selector { 
	background-size: cover;
	/* The url is relative to the document, not to the css file! */
	/* Prefer absolute urls to avoid confusion. */
	-ms-behavior: url(/backgroundsize.min.htc);
}

The elements styled this way should have a position: relative; or position: fixed; and a z-index. If not, they will be given a position: relative; and z-index: 0;.

Limitations

This polyfill inserts an <img/> in the background of all elements matched in the css to emulate the background-size value. Calculating the displayed position and size of this image is quite complex and function of numerous parameters:

  • the size of the element itself
  • the size of the image
  • the values of background-[size/position/clip/origin/attachment/scroll]

It is thus impossible to emulate background-size completely and perfectly. But it's still possible to enjoy the main features:

  • correct position and size of the background image
  • updated position and size on browser resize
  • updated image, position and size when the background-image is modified

The following style properties, values or behavior aren't supported:

  • multiple backgrounds (although the :after trick can still be used)
  • 4 values syntax of background-position
  • any repeat value in background-repeat
  • non-default values of background-[clip/origin/attachment/scroll]
  • resizing the background when the dimensions of the element change

Removing any of these limitations is probably just one fork away...

License

MIT Licensed http://louisremi.mit-license.org/ Early versions by @louis_remi, now maintained by @jefferyto

Are you using this in a paid work?
Send me music http://www.amazon.co.uk/wishlist/HNTU0468LQON

Changelog

0.2.0 (2013-08-27)

  • Added support for:
    • Dynamically changing position and size of the background image (partial reimplementation of #8)
    • Dynamically changing background image with CSS classes
    • Dynamically setting background image to none (#13)
    • Lengths and percentages for background size (partial reimplementation of #8, #19)
    • Lengths for background position
    • Debouncing window resize events (alternative implementation of #17)
    • Cloning polyfilled elements (#2)
    • background-attachment: fixed for body (#22)
  • Fixed:
    • JS error when using left or top for background-position (#14, #21, #24)
    • Other "Invalid argument" / NaN JS errors (#11, #16, #23)
    • JS error when printing
  • Use standard HTC XML tags (#10)
  • Work around IE hang on unload when the JScript portion is greater than 512 bytes
  • Added unit tests, grunt build process
  • Misc fixes and code cleanup

0.1.0 (2012-11-23)

  • Initial release