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

Store Design
, ,

Topic summary

A user is attempting to create a fixed background image that spans across three sections of their Dawn theme Shopify store: the header, image banner, and image-with-text sections. They want the background to remain stationary while content scrolls over it, similar to the effect seen on SourStrips.com.

Key Requirements:

  • Background should cover approximately 3 sections without resetting
  • Elements should glide over the fixed background during scroll
  • Other sections (announcement bar, featured collection, footer) should retain their unique backgrounds

Technical Details Provided:

  • Section dimensions noted (Header: 294.474px × 855.455px, Image Banner: 294.474px × 855.455px, Image with Text: 582.756px × 855.455px)
  • CSS code snippet included with background-attachment: fixed and specific image URL

Current Status:
The user has CSS code prepared but is uncertain where to implement it in their HTML. A follow-up question asks for clarification on the proper placement of the code.

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

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

2

Where do I input this code into my html?