Re: Logo overlay on banner image

Solved

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

Raegan_Zacher
Shopify Partner
4 0 1

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/

Foodey Hand_1 white.png

Thanks so much!

Accepted Solution (1)

made4Uo
Shopify Partner
3853 717 1201

This is an 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:

made4Uo_0-1689396490671.png

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free

View solution in original post

Replies 4 (4)

made4Uo
Shopify Partner
3853 717 1201

This is an 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:

made4Uo_0-1689396490671.png

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
Raegan_Zacher
Shopify Partner
4 0 1

Amazing! Thank you so much!

ebo8302
Excursionist
40 0 6

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

beginnerhere
Visitor
2 0 0

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