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

[HighTide_Ceylon]

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.

[Small_Task_Help]

Hi,

Hope this will help

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

Code example

<div style="position: relative; width: 100%;">
  <!-- Your Banner Image (already exists) -->

  <!-- Overlay Coffee Pack Image -->
  <img src="https://your-image-link.com/coffee-pack.png" 
       style="position: absolute; 
              top: 50%; 
              left: 50%; 
              transform: translate(-50%, -50%); 
              max-width: 200px; 
              z-index: 10;">
</div>

[HighTide_Ceylon]

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?

[HighTide_Ceylon]

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.