backstretch

Backstretch – background-size cover in IE

Background-size:cover is a really nice feature introduced in CSS3 that gives you the ability to let CSS resize the image for you rather than using a script like supersized. This feature is supported in all modern browsers and even IE9 but you will need a script to make it work in IE8 and below.

Backstretch is a simple jQuery plugin that allows you to add a dynamically-resized background image to any page. Use this plugin with Modernizer and you will have full browser support for CSS3 background-size: cover;

Simple usage:
First create a div with the class ‘stretch’ and add a data attribute so we can get the image URL easier.

<div class="stretch" data-img-url="test.jpg">
    Lorem ipsum
</div>

 
Now add the basic CSS to stretch the background image. Only supported in IE9 and up

.stretch { 
    background-image:url(test.jpg); 
    background-size:cover;
}

 
Now use backstretch to offer a fall-back for IE8 and under. Here we use Modernizer to check if ‘borderradius’ is supported and if not we activate backstretch. Make sure you have modernizer runnuing and are performing the check for border radius. You can actually check for background-size support with modernizer but I find it easier to just use the border-radius.

$(function(){
    if(!Modernizr.borderradius) {
        $('.stretch').each(function() {
            bgImgUrl = $(this).data('img-url');
            $(this).backstretch(bgImgUrl, {fade: 'fast'});
        });
    }
});

 

jquery backstretch

Comments (2)

Leave a Reply to dannydev - Cancel reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>