Adding a background Image on the Header and first 2 sections of my webpage only - Dawn

[Weekenders]

Hello,

I am trying to create a fixed background image that would be pinned and starting at the HEADER and span down  the image banner, and image with text. I want this image to remain in a fixed position as I scroll, not locked in one position, but the background actually moves down my image, with elements gliding over it without resetting in each section.

I am using this site as inspo: SourStrips.com - The site has a background image that spans about 3 sections with images on top.

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-attachment: fixed;
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: auto !important;
}

[Weekenders]

Where do I input this code into my html?