Pure CSS background depending on height

You can see the live demo here Doesn't work in pre-Chromium Edge due to nested `calc()`. And also I didn't bother to make the grid layout work in Edge for that reason. You can find a workaround for the nested `calc()` issue in Edge in the Pen description.

If you like the work I've been putting out for the past ¾ of a decade in general and this demo in particular and you wish me to be able to continue putting out stuff, please consider one of the following:

* getting me something off my Amazon WishList

🎁 🇺🇸

🎁 🇬🇧

* or at least sharing this video to show the rest of the world what can be done with CSS these days

Thank you!

---

Interpolation technique explained in my CSS-Tricks article "DRY Switching with CSS Variables: The Difference of One Declaration"

---

Original Pen:

---

See more of my demos @

If you have any suggestions *for stuff I should code in the future or questions*, drop them in the comments below or catapult them on twitter @anatudor

css,css3,css variables,custom properties,html,jade,pug,logic,maths,hsl,sass,scss,preprocessor,