How do you Overlay an Image on the Image Banner of the website's Home Page?

Topic summary

A Shopify user seeks guidance on overlaying a coffee pack image on top of their homepage image banner at hightideceylon.com to highlight a product.

Proposed Solution:

  • Locate the homepage banner section in the theme editor
  • Add the coffee pack as an overlay using custom CSS code
  • Adjust positioning as needed

Code Provided:
A CSS snippet was shared that creates an overlay container with absolute positioning, though it requires the user to insert their own image URL.

Outstanding Questions:

  • How to identify/specify the correct image banner in the code
  • Where to locate the Homepage Banner section in Shopify’s CSS editor
  • Where exactly to paste the code within that section

The original poster is new to Shopify and needs more detailed step-by-step instructions. The discussion remains open with these implementation questions unanswered.

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

Hey everyone,

I wanted to know how I could Overlay an Image on the Image Banner of my website’s Home Page? The website’s url is ‘www.hightideceylon.com’.

What I want is to overlay a Coffee Pack on top of the Image Banner to highlight the product. Please let me know how I can achieve this.

Thank you.

Hi,

Hope this will help

-Find Homepage Banner Section
-Add Coffee Pack as Overlay Using Custom Code and Adjust Image Position

Code example


  

  
  ![coffee-pack.png](https://your-image-link.com/coffee-pack.png)

Hi @Small_Task_Help . Thank you for your response. So I should Copy+Paste this code in the Homepage Banner section? Does this code identify the correct image banner or is that something I have to enter into the code as well?

Also, I am very new to Shopify and I am a little confused with the CSS editor. How do I locate the Homepage Banner section? And once I do, do I copy this code at the bottom of that section? Sorry about all of the questions, I am still quite new to all of this. Thank you in advance.