Trouble with responsive fixed background image sizing

EEEK! I am applying to a job tomorrow and wanted to upload all my imagery and publish my page today so that I’d be ready for tomorrow!!! I cannot figure out why my background images aren’t working, and it’s killing me.

As an example, look at page “Cascade Flyers”.

So my project pages have a hero image at the top of each page. I have set the herosection to have a fixed height. I want the aspect ratio to roughly be 2.5:1 for all screen sizes. I set my images in photoshop to be 4000x1600 px.
When I set them as background images in my herosection and I make them set to ‘scroll’, then the image sits the way I want it on the page. But I want the background image to be set to fixed not scroll, and as soon as I do that the image no longer fills the herosection properly (especially when you change to smaller screen size).
I think the trouble is all in the background image being fixed instead of set to scroll. So my workaround for the moment is to assign large screens to fixed background image, but tablet and smaller will be scroll instead.

If anyone can tell me how to correct it so that smaller screens can also have a fixed background image (that actually fills the div properly) I would be SO GRATEFUL for your help!

Here is my public share link:

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.