Applying CSS filters to background images

recolor_background.css

/* Some elements may need this to make sure they are the
 * position parent of the child pseudo-element we'll create
 * below
 */
your_element {
  position: relative;
}

/* This pseudo-element copies the background from its parent,
 * allowing you to apply CSS filters just to the background image.
 */
your_element::before {
  background-image: inherit;
  background-repeat: inherit;
  background-size: inherit;
  background-position: inherit;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  content: "";
  -webkit-filter: hue-rotate(180deg);
  filter: hue-rotate(180deg);
}