Skip to content

Instantly share code, notes, and snippets.

@Eworm
Created April 29, 2014 12:19
Show Gist options
  • Save Eworm/11398566 to your computer and use it in GitHub Desktop.
Save Eworm/11398566 to your computer and use it in GitHub Desktop.
A simple wepb background function to use in combination with the modernizr test.
/* 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');
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment