How do I make the Image banner cover the whole screen?

Topic summary

A user wants to modify their Shopify store’s header so that an image banner extends over the entire screen, including the header area, when visitors first land on the site.

Desired behavior:

  • Image banner should initially cover the header completely
  • When users scroll or hover over the menu, the header should return to its default background color
  • Text color should change to white during the overlay state, with the ability to customize these colors later

The user provided visual examples showing the before and after states, along with their website URL and password for reference. Two other users expressed interest in implementing the same feature for their own sites.

Status: The question remains unanswered with no solutions provided yet. This likely requires custom CSS/Liquid code modifications to the theme’s header section.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.

I want the image banner of my website to cover even the header part when someone enters the store similarly to

here:

And then when they scroll or hover over the menu, it turns back to the default color like this, and I also want the text color to change to white (I want to be able to edit this later on what color it changes to and back):

How do I make this possible?

Website: longdistanceloveclub.com

Password: edimar123

Thank you for any help in advance, also I hope its not too much to ask for!

2 Likes

Interested also

1 Like

Now I also want to do the same for my website, It is looking really cool.