Skip to content

Instantly share code, notes, and snippets.

@kevgk
Last active September 28, 2017 13:32
Show Gist options
  • Save kevgk/5c3b106eaced3a892fba1ec388892c9e to your computer and use it in GitHub Desktop.
Save kevgk/5c3b106eaced3a892fba1ec388892c9e to your computer and use it in GitHub Desktop.
Sass Webp background-image Mixin (w/ modernizr)
// Mixin:
@mixin webp-background($webp, $fallback)
.no-webp &, .no-js &
background-image: url($fallback)
.webp &
background-image: url($webp)
// Usage:
.container
width: 500px
height: 300px
+webp-background('test.webp', 'test.jpg')
// Output:
.container {
width: 500px;
height: 300px;
}
.no-webp .container,
.no-js .container {
background-image: url("test.jpg");
}
.webp .container {
background-image: url("test.webp");
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment