A simple wepb background function to use in combination with the modernizr test.

gistfile1.txt

/* A webp sass include
=================================================================*/
@mixin webp-bg($image) {

    /* This will assume you're using the webp modernizr test */
    /* There's no default image. Not very pretty, but otherwise the browser will download both images */

    .no-webp & {
        /* We're assuming there's a jpg */
        background-image: url($image + '.jpg');
    }
    
    .webp & {
        /* On webp capable browsers, use a webp */
        background-image: url($image + '.webp');
    }    
}