Image Banner - Transparent image has white background

[ShopElle]

Hi! I need help with my transparent image turning into a white background within the image banner section. I've tried multiple code solutions, but none of them have worked so far. Any advice or working examples would be greatly appreciated!

Theme: Dawn

Website: https://wxccqp-af.myshopify.com
Password: bowgla

 

 

[websensepro]

Hi @ShopElle 

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

.banner__content.banner__content--middle-center.page-width.scroll-trigger.animate--slide-in {
    background: white;
}

If my reply is helpful, kindly click like and mark it as an accepted solution.
If you are happy with my help, you can help me buy a COFFEE
Thanks!

[ShopElle]

Hi @websensepro 

Thank you for your assistance. Unfortunately that code doesn't work, all it does is animate my image out of the screen and leaves a full white image. 

[websensepro]

So you want to remove this image and also eliminate the space it is creating?

[ShopElle]

No, the original png image has a transparent background. When I add the media into the image banner it automatically adds a white background onto it. I want to remove the white background and have my original transparency. 

Here is the original image:

[websensepro]

Your image does not have a transparent background; the image itself has a background.

[ShopElle]

My image is indeed transparent, the text box must've added a background when you opened it in another tab. 
Any further solutions is greatly appreciated!

[Made4uo-Ribe · Accepted solution]

Hi @ShopElle 

Yes its transparent. 

Try this one. 

1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
3. In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.banner__media.media.scroll-trigger.animate--fade-in img {
    background:radial-gradient(rgba(167, 167, 167, 1), rgba(80, 80, 80, 1) 100%);
}

• And Save.
• Result:
• 

 Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! 

[ShopElle]

Thank you so much @Made4uo-Ribe this solution worked perfectly!

[Made4uo-Ribe]

Welcome! Would you mind hitting 'like' as well? Thanks!

Happy New Year!