Full width banner #mixin

_banners.scss

// Full width image banner.
//
// Usage:
// @include banner('../images/banner.jpg')
// @include banner('../images/banner.jpg', 700px)
// @include banner('../images/banner.jpg', 700px, center, center, #fff)
// @include banner('../images/banner.jpg', 700px, center, center, #fff, true)
// @include banner('../images/banner.jpg', 700px, center, center, #fff, false, rgba(255, 0, 0, .45))
@mixin banner($url, $height: 600px, $horizontal: center, $vertical: center, $fallback-color: null, $paralax: null, $overlay: null) {
  @if($overlay) {
    background: linear-gradient($overlay, $overlay), url($url);
  } @else {
    background-image: url($url);
  }
  background-position: $horizontal $vertical;
  background-size: cover;
  @if($fallback-color) {
    background-color: $fallback-color;
  }
  @if($paralax) {
    background-attachment: fixed;
    background-repeat: repeat-x;
  }
  min-height: $height;
}