Image with Text - Image with Transparent Background Not Working.

Store Design
, , , ,

Topic summary

A user encountered an issue where uploading a transparent PNG image to an “Image with Text” section resulted in a visible white background and border instead of maintaining transparency.

Solution Provided:
Another user shared custom CSS code to fix the transparency issue by:

  • Setting background: transparent !important
  • Removing borders with border: unset !important
  • Adding box-shadow: unset !important
  • Including object-fit: contain for proper image rendering

The CSS targets the specific section class and media elements.

Implementation Options:

  1. Add the code to theme.liquid file above the </body> tag
  2. Alternatively, insert it into the base.css file for better organization

Outcome:
The solution successfully resolved the transparency issue. The user confirmed it worked and opted to add the CSS to their base.css file to keep customizations organized in one location.

Summarized with AI on November 5. AI used: claude-sonnet-4-5-20250929.
1

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.

Danceddiction_0-1727996859505.png
Danceddiction_0-1727996859505.png1584Ă—701 155 KB

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

password: testword

2

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 tag

Result:

Screenshot_20.png
Screenshot_20.png1297Ă—592 244 KB

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

Best Regards,
Helal

3

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!

4

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;
}
1 Like
5

Thank you!