How can I integrate an image banner with my header?

Topic summary

Goal: Make the homepage image banner sit behind the header (logo/menu) and then switch to a solid background on scroll (sticky header), similar to soleilsoleil.com.au.

Progress: After the store URL was shared, a helper provided steps to edit theme.liquid and add a Liquid conditional targeting the homepage. They stated they applied the change and shared a screenshot of the result, indicating the header visually blends with the banner.

Provided steps:

  • Online Store > Edit Code > theme.liquid
  • Insert a Liquid block around homepage logic: {% if template == ‘index’ %} … {% endif %}

Current issue: The original poster requested the next behavior—when scrolling, the header should revert to a solid background color (previous default). This scroll-state styling has not been confirmed as implemented.

Additional activity: Another participant asked for help achieving the same effect (blend with video banner, then sticky header on scroll). A different commenter noted the site appears updated and asked how it was done.

Status: Partially resolved (banner-header blend achieved). Open items: apply solid background to the sticky header on scroll and share final implementation details. The shared image is central to understanding the achieved result.

Summarized with AI on December 15. AI used: gpt-5.

I see you were able to complete your modification beautifully. Can you please let me know how you did it?