background image filter css

/* Answer to "blur behind element css" */

/*
	This blurs everything behind the element it's applied to
*/

backdrop-filter: blur(10px);

.blur {
  filter: blur(4px);
}
.brightness {
    filter: brightness(0.30);
}
.contrast {
    filter: contrast(180%);
}
.grayscale {
  filter: grayscale(100%);
}
.huerotate {
  filter: hue-rotate(180deg);
}
.invert {
  filter: invert(100%);
}
.opacity {
  filter: opacity(50%);
}
.saturate {
  filter: saturate(7);
}
.sepia {
    filter: sepia(100%);
}
.shadow {
    filter: drop-shadow(8px 8px 10px green);
} 

  filter: blur(8px);
  -webkit-filter: blur(8px);

.module {
  position: relative;
}
.module::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-image: url(graphic-to-be-filtered.jpg);
  filter: grayscale(100%);
}
.module-inside {
  /* This will make it stack on top of the ::before */
  position: relative;
}