U made a CSS class called "hue-rotate" so you need to apply the class to something
E.g. <body class="hue-rotate"> if you wanted to apply it to the entire webpage.
As for making it apply to ONLY the background image; youd need to make a fake background and then apply it to that, e.g.
<div id="mybg" class="hue-rotate"></div>
Then in CSS - you can do this which makes it will make it fill the page and float behind everything like a background.
#mybg{
background-image: ur image link etc
height: 100%;
width: 100%;
top: 0;
left: 0;
position: fixed;
z-index: -10;
}
You might need to tinker a bit to make it actually fill the page (try making the html, and body 100% wide and tall) and avoid body padding which will mess with it!
The hue animation is a really cool idea and Id love to see how it works out!