Background-size for IE with jQuery

Background-size for IE with jQuery

A jQuery cssHook adding support for "background-size:cover;" and "background-size:contain;" to Internet Explorer 6-7-8, in 1.5Kb (minimized)

  • Language: JavaScript
    Framework: jQuery
  • Released: Apr 16, 2012
    Last Update: Jun 3, 2012

jquery.backgroundSize.js

A jQuery cssHook adding support for "cover" and "contain" to IE6-7-8, in 1.5K

Introduction

Progressive Enhancement is the mantra I live by. It means "Have fun with CSS3 and don't worry about IE6-7-8 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 IE6-7-8 users - unless you use this cssHook!

How does it work?

Set the background-size just like any other style property with jQuery:

$(elem).css( "background-size", "cover" );

In browsers that don't implement it natively, an <img/> will be inserted in the background of elem and emulate the cover or contain value.

Limitations

Calculating the displayed position and size of the background-image of an element 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 using $(elem).css("background-image", "differentImage.jpg");

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

  • values other than cover or contain in background-size
  • multiple backgrounds (although the :after trick can still be used)
  • 4 values syntax of background-position
  • lengths (px, em, etc.) in background-position (only percentages and keywords such as center work)
  • any repeat value in background-repeat
  • non-default values of background-[clip/origin/attachment/scroll]
  • updated image size when the size of the element is modified

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

Development vs. Production

The elements targeted by this plugin should be positioned (position: relative/absolute/fixed; but not static) and have a z-index. If not, they will be given a position: relative; and z-index: 0;.

In some cases this could potentially alter the layout of your page in IE6-7-8. To help you spot problems earlier, you can use a flag that will turn ON emulation of background-size in all browsers:

<!-- The flag should be inserted before loading the script -->
<script>$.debugBGS = true;</script>
<script src="/path/to/jquery.backgroundSize.js"></script>

Switch to the following snippet before deploying your code to a production environment:

<!--[if lt IE 9]> <script src="/path/to/jquery.backgroundSize.min.js"></script> <![endif]-->

Refreshing a background

There are several cases that can cause an element to be resized and require its background to be refreshed (e.g. modifying the size of its content or animating it). This plugin includes a helper for that purpose: $.refreshBackgroundDimensions( elem );. Here's how to use it during an animation:

$(elem).animate({ height: "+=100" }, {
    step: function() { $.refreshBackgroundDimensions( this ); }
});

License

MIT Licensed http://louisremi.mit-license.org/, by @louis_remi

You need to log-in or create an account
  • Create an account
  • Log-in
Please use your real name.
Activation link will be sent to this address.
Minimum 8 characters
Enter your password again

Clicking this button confirms you read and agreed to the terms of use and privacy policy.

X

Save your watchlist

Fill your details below to receive project updates from your watch list - including new versions, price changes and discounts.

I agree to the terms of use and privacy policy.

1 license From » $11.99 14 day money-back guarantee View Licenses
or Get a quote

for customization or integration services

Post a comment

Or enter your name and Email
  • CW Charles Wilmott 2 years ago
    Hi, Thank you for your great JQuery plugin I want to make a CSS3 background changing image slideshow like this http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/ Would you let me know please if this is possible with your plugin? Many Thanks and Best Regards Charles
    • Louis-Rémi Babé Developer 2 years ago
      Hi Charles, It is possible to change the background image dynamically (using $(elem).css('backgroundImage', ...) ) but no transitions would happen (like the "fade in" in your example).