<div class="img img--effect-blur"></div>
<div class="line"></div>
<div class="img"></div>
<div class="line"></div>
<div class="img img--effect-saturated"></div>
<div class="line"></div>
<div class="img img--effect-grayscaled"></div>
<div class="line"></div>
<div class="img img--effect-sepia"></div>
$base-background: #252528;
$img: "https://i.pinimg.com/originals/95/75/8c/95758cf6fc089b31da62be6b4df22393.jpg";

* {
  margin: 0;
	padding: 0;
}

body, html {
  height: 100%;
  background: $base-background;
}

.img {
  position: relative;
  background-image: url($img);
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%; 
}

.img--effect-grayscaled {
  filter: grayscale(100%);
}

.img--effect-sepia {
  filter: sepia(100%);
}

.img--effect-saturated {
  filter: saturate(50%);
}

.img--effect-blur {
  filter: blur(2px);
}

.line {
  height: 1px;
  background: black;
}

// filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://code.jquery.com/jquery-2.2.4.min.js