Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Applying CSS filters to background images
/* 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);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.