Fullscreen header afbeelding


Responsive header afbeelding
Fullscreen header afbeelding Image by Angel Jimenez

Code om een responsive full-screen header afbeelding te maken met background-size: cover;.

HTML:

<header class="header" style="background-image: url();">
  <div class="header-inner">
  </div>
</header>

Eerst gaan we een mixin creƫren die we op gaan roepen met @include header();:

@mixin header($deg, $start-color, $end-color) {
  background-color: $start-color;
  background-image: -webkit-linear-gradient($deg, $start-color, $end-color);
  background-image:    -moz-linear-gradient($deg, $start-color, $end-color);
  background-image:     -ms-linear-gradient($deg, $start-color, $end-color);
  background-image:      -o-linear-gradient($deg, $start-color, $end-color);
  background-image:         linear-gradient($deg, $start-color, $end-color);
}

SCSS:

$color1: #111;
$color2: #222;
$color3: darken($color1, 30%);

html,
body{
  width: 100%;
  height: 100%;
}

header{
  display: table;
  position: relative;
  width: 100%;
  height: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 0;
  color: #fff;
  background-color: $color3;

  &-inner {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    position: relative;
    padding: 20px;
  }

  &:before{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    content: "";

    background-color: $color3;
    @include header(to bottom right, $color1, $color2);
    opacity: 0.6;
  }
}