How to move image banner behind Header (Dawn theme)

Store Design

Topic summary

Users are seeking to position an image banner behind the header on Shopify’s Dawn theme homepage, with the header becoming opaque/white on scroll.

Initial Solution:

  • A CSS and JavaScript code snippet was provided to add before the </body> tag in theme.liquid, specifically targeting the index template.
  • The solution works when the background image changes.

Common Issues Encountered:

  • Width problems: Multiple users report the banner not extending full width, leaving white space on sides.
  • Fix: Adding header.header { max-width:100%; } to base.css resolves width issues.
  • Mobile display: Text/content appears divided or improperly positioned over the banner in mobile view.
  • Sticky header behavior: Some users experience unwanted sticky header with white background on scroll.
  • Page-specific application: Difficulty limiting the transparent header effect to homepage only, especially on mobile.

Current Status:

  • The thread remains active with ongoing troubleshooting requests.
  • Recent users (as of late 2024) question whether the original solution still works with current Dawn theme versions.
  • One user cannot locate the correct placement for the code in theme.liquid.
  • Several requests for store-specific assistance remain unanswered.
Summarized with AI on October 23. AI used: claude-sonnet-4-5-20250929.
24

Hello again :slightly_smiling_face: thank you so much for following up!

I managed to do the above and more but I am stuck with one last issue.. trying to disable the transparent header on pages other than home page on mobile https://k4i6qlml42dqbvxe-83068584245.shopifypreview.com if you have any idea how I can do that it would be really really amazing its the last thing I need figuring out and then I am “done”