Image with Text - Image with Transparent Background Not Working.

[Danceddiction]

I have an image with text section on my website. I am trying to upload an image that has a transparent background, but you can see a border and white background appearing. 

I would like to make sure that the image background remains transparent and have it apply to only this section in particular. 

Website: www.danceddiction.com/pages/about-us

password: testword

[Helal · Accepted solution]

Hey @Danceddiction 

Follow these Steps:

1) Go to the Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code at the bottom of the file above </body> tag

<style> 
.section-template--18442698719487__image_with_text_nQxqbR-padding .image-with-text__media.image-with-text__media--adapt.global-media-settings.background-transparent.media {
    box-shadow: unset !important;
    border: unset !important;
    background: transparent !important;
}
.section-template--18442698719487__image_with_text_nQxqbR-padding .image-with-text__media.image-with-text__media--adapt.global-media-settings.background-transparent.media img {
object-fit:contain;
}
</style>

Result:

If I helped you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Helal

[Danceddiction]

This worked!

Thank you! I do have another question though. While this did work, I prefer to keep my custom css in specific places. I have been making most of them in the base.css file. Is there any way to I can transfer this to that page instead? 

If not no problem, this works beautifully!

[Helal]

You can add this CSS code to the base.css file instead of inserting it directly into the header.

.section-template--18442698719487__image_with_text_nQxqbR-padding .image-with-text__media.image-with-text__media--adapt.global-media-settings.background-transparent.media {
    box-shadow: unset !important;
    border: unset !important;
    background: transparent !important;
}
.section-template--18442698719487__image_with_text_nQxqbR-padding .image-with-text__media.image-with-text__media--adapt.global-media-settings.background-transparent.media img {
object-fit:contain;
}

[Danceddiction]

Thank you!