<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
This Pen doesn't use any external CSS resources.