How can I overlay a logo on my hero banner image?

Store Design
, ,

Topic summary

A user needed help overlaying their logo on a hero banner in Shopify 2.0, similar to their old site implementation.

Solution Provided:

  • Add custom CSS code to the theme’s base.css file
  • The code uses a :before pseudo-element to position the logo image above banner content
  • Includes media query for screens 750px+ and opacity/positioning controls

Current Issues:

  • One user reports the code wouldn’t save
  • The logo now appears on all image banners site-wide, not just the homepage
  • Question raised about using different images for different banner overlays

Status: The original poster’s issue was resolved, but the solution needs refinement to:

  • Target only the first/homepage banner specifically
  • Support multiple different overlay images across various banners
Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
3

Amazing! Thank you so much!