SCSS Mixin for Background Cover

I’m just dumping some simple SCSS Mixins here as a mini code repository for posterity.

This simple mixin saves repeating browser specific cover declarations when needed (in this example the mixin is declared in _bespoke-mixins.css)

_bespoke-mixins.scss

@mixin cover {
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
 }

This is used as follows where needed to include the cross browser ‘cover’ declarations.

Usage

.ghostbg {
 background-color: $light-grey !important;
 @include cover;
 }