I’m struggling with responsive images as backgrounds. We all know that we can either set an entire section with an image background (which is easiest) however, it is very limiting to do that (no chance at doing fancy stuff like blending modes and/or parallex effects).
So I have covered an entire section with an image and applied a blending mode (see picture).
What I am trying to figure out, is the best way to make this responsive when adjusting the browser window (and later when on mobile devices). Here is a screenshot of an extreme example when one decreases the size of the browser window:
As you can see, the image adjusts to stay proportional and then creates an “empty” space beneath. It is important at this stage to mention that my section height is fixed at 100vh.
Does anyone have a good way to work around this? I.e. make the image grow in size to prevent the dreaded “empty space” from appearing?
Thanks to everyone who took the time to read this far