Logo overlay banner image homepage only DAWN

Store Design
, , ,
1

Hi guys,

I was looking to find some code to create an overlay logo on my homepage banner. I found a code that partly worked, but it’s not working on mobile screens + this code applied the logo over all banners. I use Dawn theme.

The banner id:

id=“Banner-template–17536408387833__image_banner”

id="shopify-section-template–17536408387833__image_banner”

(not sure which one I need)

Hope someone can help me out adjust this code to get it working on mobile + only on this section banner. Thanks a million!

Kindest,

Kelly

@media only screen and (min-width: 750px) {
.banner__content:before {
    content: "";
    background-image: url(https://cdn.shopify.com/s/files/1/0691/8655/2057/files/Esterella_logo_onder1-alt.png?v=1709041616);
    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;
}
}