2

Like the title says, I can't actually apply hue-rotate to the body tag to change the body's background. I tried putting it in the css attributes for the html tag to no avail.

An example of my dilemma can be seen at this codepen.

What's weird is you can add a background-color to a button and hue-rotate it from the same CSS scope, but you can't do the same for the body tag. Does anybody know why, and/or has a fix for this?

Improve this question
3
  • Please edit your question to include the code within the question itself. The code within your link will become stale at which point this question fails to be helpful to future readers.
    – chazsolo
    Commented Oct 31, 2017 at 18:32
  • ... because when you set a background to html or body it is applied to .. html. So to apply the red background to body where filter stands, you need to apply a bckground to html too . jsfiddle.net/4o4w1167/5 jsfiddle.net/4o4w1167/6
    – G-Cyrillus
    Commented Oct 31, 2017 at 18:48
  • Maybe I didn't totally clarify why I'm seeking this answer - I want the page's entire background color to hue-rotate. Even if I add hue-rotate to html, it won't rotate the color of the background defined in the html tag. However, the example with the buttons shows that you don't need to hue-rotate a parent to affect a child. I'm wondering why we can't hue-rotate a background color defined in html
    – mjkaufer
    Commented Oct 31, 2017 at 18:56

1 Answer 1

Reset to default
1

Use background : hsl(0%,100%,70%); And then apply filter: hue-rotation(); It will work.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.