Adding Background Image to 3 sections only - Dawn Theme

Technical Q&A
,

Topic summary

A user is attempting to create a fixed background image that spans three consecutive sections (header, image banner, and image with text) on their Shopify Dawn theme site. The goal is to have the background remain stationary while content scrolls over it.

Section Dimensions:

  • Header: 294.474px × 855.455px
  • Image Banner: 294.474px × 855.455px
  • Image with Text: 582.756px × 855.455px

Key Challenge:
The user wants to apply this fixed background to only these three sections while maintaining unique backgrounds for other areas like the announcement bar, featured collection, and footer.

The post includes CSS code (displayed in reverse text) that appears to set background properties including background-attachment: fixed, background-position: top left, and references to a background image URL. The discussion remains open with no responses yet, seeking guidance on implementing this selective fixed background effect.

Summarized with AI on November 4. AI used: claude-sonnet-4-5-20250929.
1

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;
}