Banner image with transparent background is mysteriously showing up with a brown background

[grassisgreen]

Here is how it appears on my store:

Here is the image in my files. The background of the png is definitely transparent. 

A bit of helpful information:

I'm using the Origin theme. The way I've got this set up is that I've created a banner image with a completely transparent png image, and used custom css to set the background image to the SINGLEFLATSTRAP.png image you're seeing above. (I did this because uploading my desired image directly as a banner causes shopify to compress it into oblivion.) 

Nowhere in the scheme that I am using for this section does a brown color even appear. The brown color appears as soon as I assign the completely transparent png to the banner:

I'm assuming this color is some sort of default shopify or theme setting, but I can't figure out where the code is located to change it. Any help would be much appreciated. 

[Dan-From-Ryviu · Accepted solution]

It will look like that if remove brown background.

Please add this code to remove brown background

.banner__media {
background: none !important;
}

[Dan-From-Ryviu]

Hi @grassisgreen Could you share your store URL?

[grassisgreen]

c4d843.myshopify.com

password:

DeoTeAad!&fa@$hyaK

[Dan-From-Ryviu · Accepted solution]

It will look like that if remove brown background.

Please add this code to remove brown background

.banner__media {
background: none !important;
}

[David_SHT]

Hi @grassisgreen 

This is David at SalesHunterThemes.

Thank you for your question. 

Please share your store URL, page URL and also password (if your store has one) so we can help you.

[PageFly-Noah · Accepted solution]

Hi @grassisgreen  

This is Noah from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
.banner__media {
background-color: unset !important;
}
</style>

Hope this can help you solve the issue 

Best regards,

Noah | PageFly