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.
5

Thank you!