🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Simple Polyfill for CSS3 backgroundSize: cover in jQuery.backgroundcover will not test your browser’s capability for backgroundSize:cover`, hence it is recommended to use a library like Modernizr.

CSS Image Effects Plugins

Documentation

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


You May Also Like