Adding Background Image to 3 sections only - Dawn Theme

[Weekenders]

Hello,

I am trying to create a fixed background image at the top of my webpage that spans across three sections: the header, image banner, and image with text. I want this image to remain in a fixed position as I scroll, with elements gliding over it without resetting in each section.

I've noted the dimensions of each section:

• Header: 294.474px height by 855.455px width
• Image Banner: 294.474px height by 855.455px width
• Image with Text: 582.756px height by 855.455px width

How can I achieve this, while still setting unique backgrounds for my other sections, like the featured collection, footer, and announcement bar?

Website: https://theweekenders.ca/?_ab=0&_fd=0&_sc=1

.gradient {
background: var(--gradient-background);
background-image: url(https://cdn.shopify.com/s/files/1/0615/8116/4622/files/Background_Image.png?v=1730820255) !important;
background-color: transparent !important;
background-position: top left !important;
background-size: cover !important;
}