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

[Raegan_Zacher]

Hi there, 

I need help overlaying my logo image on my hero banner. 

We did this on our old site, but I can't remember how and it looks different on Shopify 2.0. 

You can see our FOODEY logo appears on our banner on our old site here:

https://foodey.com.au/

Basically, we want the attached image (logo) to appear above the banner text on this site:

https://foodey-ready-made.myshopify.com/

Thanks so much!

[made4Uo · Accepted solution]

Hi @Raegan_Zacher,

You can do the following to your website to obtain the same result with your other website

1. From you Admin page, go to Online store > Themes > Click the three dots on the theme you want to edit > Edit code
2. Go to Asset folder and open the base.css file
3. At very end of the code, add the code below

@media only screen and (min-width: 750px) {
.banner__content:before {
    content: "";
    background-image: url(https://cdn.shopify.com/s/files/1/2632/6478/files/foodey-circle_134x134_crop_center@3x.png?v=1517228624);
    display: block;
    position: absolute;
    width: 100%;
    max-width: 30rem;
    height: auto;
    aspect-ratio: 1;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    top: 15%;
    margin: auto;
    opacity: 0.5;
}

.banner__content {
    position: relative;
}
}

Result here:

[Raegan_Zacher]

Amazing! Thank you so much!

[ebo8302]

I tried this and it didn't work for me... wouldn't even let me save the code. ☹️

[beginnerhere]

How can I use a different image to different banner overlay?

[ramonkooij]

Wow. Works for me. Thanks!

Only, it shows up on every 'Image Banner' now. Which adjustment should be taken to show it only on the first page, first Image Banner?