Simple Polyfill for CSS3 backgroundSize: cover
Requirements
- jQuery 1.9.* or higher
Demo
Demo page is available here.
Usage
$.backgroundcover
respects the background-position
properties of your element as well.
css
.background-image { background-image: url(path/to/image.jpg); background-position: center center; background-repeat: no-repeat; /* you'd normally also set background-size here */ }
html
<div class="background-image"></div>
js
// apply `backgroundcover` to an element that has a background image: $('.background-image').backgroundcover(); // or to an element without background image by setting the image source // explicitly: $('.my-div').backgroundcover('path/to/image.jpg'); // You can also specify a position value which will override values found by // the actuall backgound positioning `(left|center|right, top|center|bottom)`. // Positioning will always fall back to `center center` if no value is found at all // Use this item to add a background image and set positioning $('.my-div').backgroundcover('path/to/image.jpg', {x: 'left', y: 'top'}); // Use an existing background image but manipulate its position $('.background-image').backgroundcover({x: 'center', y: 'bottom'}); // you may also pass options: // setting `poll` to true will start polling the element for size change // instead of resizing the image on a window resize event. `poll` is set to // `false`by default. $('.my-div').backgroundcover('path/to/image.jpg', {poll: false}); // you can also add your custom destroy events, e.g. for angular you'd add // '$destroy' $('.my-div').backgroundcover('path/to/image.jpg', {destroy: 'destroyevent'});
Note
backgroundcover
will not test your browser's capability for backgroundSize:cover`, hence it is recommended to use a library like Modernizr and a custom test. e.g:
Modernizr.testStyles( '#modernizr', function (elem, rule) { var style = Modernizr.prefixed('backgroundSize'); elem.style[style] = 'cover'; Modernizr.addTest('backgroundsizecover', (elem.style[style] === 'cover')) } );
An angularJS directive can be found here