Transparent Background on Monaco Cards

[joe_borriello]

I tried a number of .css updates recommended here, none have worked. I'm trying to remove or at least change the color of the auto-white background that is applied to my transparent images. I'm using the Monaco theme. Something site wide would be nice, but I'm totally okay with section-by-section updates, if needed.

https://borriello.co

password: pw1234 

[BSSCommerce-HDL · Accepted solution]

Hi @joe_borriello, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
.media.media--transparent.media--portrait.media--hover-effect {
    background-color: transparent !important;
}
</style>

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you  😍

[BSSCommerce-HDL · Accepted solution]

Hi @joe_borriello, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
.media.media--transparent.media--portrait.media--hover-effect {
    background-color: transparent !important;
}
</style>

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you  😍

[BSSCommerce-B2B]

@joe_borriello ,

Step 1. Go to Admin -> Online store -> Theme > Edit code

Step 2. Find the file theme.liquid.

Step 3. Add this code above </body>

<style>
.card__inner .media {
    background:transparent!important;
}
</style>

Result:

[Hardik2903]

@joe_borriello  Please go to
1) Online store
2) Themes -> Edit theme
3) Layout
4) theme.liquid and paste this code before </head>

<style>
.product-slider__wrapper .card .card__inner .media {
background-color: transparent !important;
}
</style>

[Dan-From-Ryviu · Accepted solution]

Hi @joe_borriello 

Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings 

.card-wrapper .media { background: transparent !important; }

[GTLOfficial]

Hello @joe_borriello 
Go to online store ----> themes ----> actions ----> edit code ----> assets ---->component-card.css

.media.media--transparent.media--portrait.media--hover-effect {
background: transparent !important;
}

result

If this was helpful, hit the like button and accept the solution.
Thanks

[websensepro]

Hi @joe_borriello ,

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

<style>
.media.media--transparent.media--portrait.media--hover-effect {
    background-color: transparent !important;
}
</style>

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!