Product images no longer transparent on custom image background

Store Design
1

For my site www.flavashack.co.uk I have added a custom image background, however now this is making all my product images also display a smaller version of this same background image and I just want them to be transparent.

Also the main image banner on my home page is displaying as transparent but has a weird grey opacity to it so any fixes for that too would be great.

2

Hello @kroenhead ,

Could you please provide the password to your store so that I can check it and provide you with the exact solution?

3

@kroenhead can you please share the password to view the page?

4

FLAVAFLAVAPASSWORD

5

FLAVAFLAVAPASSWORD

6

Hello @kroenhead ,

Here are the steps to apply the necessary changes in your Shopify store:

  1. In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
  2. Locate Asset > base.css and paste the following code at the bottom of the file:
.card--standard.card--text a:after, .card--card .card__heading a:after {
    background-color: #c4e3f0 !important;
    z-index: -1111 !important;
}

.banner__media.media.scroll-trigger.animate--fade-in {
    background: unset !important;
}

ZestardTech_0-1737120773986.png
ZestardTech_0-1737120773986.png1891Ă—718 159 KB

ZestardTech_1-1737120819540.png
ZestardTech_1-1737120819540.png1899Ă—829 192 KB

Let me know if you need further assistance!

1 Like
7

@kroenhead the thing is you have given background image to gradient css class, this class is shared by main body as well as many sub sections on the page and hence every that section is showing this background image.

Where exactly do you want this background image? for main body only?

8

Okay great that got rid of the weird opacity on the image banner but, the product images are now blue how do I make it so they are transparent?

9

I want the background image all over the site, but just not as the backgrounds for my collection cards. right now it is double layering the images over each other where the products are

10

And then also on phone display the design isn’t continuous, as in there is a white bar at the top and bottom, is there a way to make the design seamless?

11

Hello @kroenhead ,

To make product image background transparent you can change the color value according to your requirement from inspect elements.

Run your store on browser > open inspect elements > go to the class “.card–standard.card–text a:after, .card–card .card__heading a:after” go to color picker and change the color.

Let me know if you need further assistance!

12

@kroenhead looks like you have removed the background image, can you please add it again to check?

13

Im sorry im not familiar with inspect elements. is there no way to do it through code? I managed to do it for my other store www.kroen.co.uk (Password: 3055SitesHUT) but having more issues with this site for some reason despite entering the same code (I think)

14

Hello @kroenhead ,

Here are the steps to apply the necessary changes in your Shopify store:

  1. In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
  2. Locate Asset > base.css and paste the following code at the bottom of the file:
.card--standard.card--text a:after, .card--card .card__heading a:after {
    background-color: transparent !important;
    z-index: -1111 !important;
}

 .card-wrapper > .gradient  {
    background-image: unset !important;
}

ZestardTech_0-1737352133566.png
ZestardTech_0-1737352133566.png1788Ă—699 126 KB

Let me know if you need further assistance!

15

thanks so much that worked perfectly