Container on Image Banner keeps coming back when I add a Background Image to the Website

Store Design
,
1

For some reason I have a mysterious Container that keeps popping up on my Image Banner whenever I add Background Image to my website. I’m not sure how well I am describing this, so hopefully the pictures will make more sense.

hellodarkling_0-1741696688134.png
hellodarkling_0-1741696688134.png992×618 92.5 KB

^Gradient Background, no Container behind the text. Exactly the way I want it.

hellodarkling_1-1741696777121.png
hellodarkling_1-1741696777121.png977×620 98.2 KB

^ Background is now an image and what? Container! Where did you come from? You are turned off!!! Go away Container. No one wants you here!

hellodarkling_2-1741697019744.png
hellodarkling_2-1741697019744.png333×494 17.2 KB

^ See Container, you are turned off. Why are you so obsessed with me???

The Image Banner has no custom code.

The code I am using to make the Background Image:
/* WEBSITE BACKGROUND /
/ Desktop /
@media(min-width:768px){ .gradient {
background: var(–gradient-background);
background-attachment: fixed;
background-image: url(https://cdn.shopify.com/s/files/1/0733/4241/9187/files/PearlWeb.png?v=1741694829) !important;
background-color: transparent !important;
background-position: top center !important;
background-size: auto !important;
} }
/ Mobile */
@media only screen and (max-width: 750px){ .gradient {
background: var(–gradient-background);
background-attachment: fixed;
background-image: url(https://cdn.shopify.com/s/files/1/0733/4241/9187/files/Pearl_Web.png?v=1741696389) !important;
background-color: transparent !important;
background-position: top center !important;
background-size: auto !important;
} }

Any help that anyone can offer is greatly appreciated

Theme: Dawn
Website: https://darklingnails.com/
Password: darkling

1 Like
2

Hey @hellodarkling

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1741697786036.png
Moeed_0-1741697786036.png1530×923 124 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
3

Thank you so much!

1 Like
4

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

1 Like
5

@Moeed I’m so sorry to come back to you on this, but I’m hoping you can help me one more time on this issue. I’m realize that the code you gave me, while fantastic, is changing all of my Image Banner containers, not just the one we were talking about. I was hoping to solve this by change the code to:

{% if page.handle == ‘home’ %}

.banner__box.gradient { background: transparent !important; }

{% endif %}

but it doesn’t seem to work. I also tried “index” as the page handle and that failed as well. Can you tell me please how to correct this so that I’m only targeting the home page and not any others?
Thank you so much!