Images are Transparent on Product Page but Have a White Background on Home Page

Store Design
, , ,

Topic summary

A user encountered an issue where product images appeared transparent on product pages but displayed with white backgrounds on the home page, despite using transparent PNG files. The site uses Shopify’s Dawn theme.

Problem Details:

  • Background image was added via custom CSS in base.css
  • Images needed to have no background and not repeat behind the theme
  • Screenshots showed the inconsistent display across different pages

Solution Provided:
A CSS fix was implemented by adding the following code to the base.css file:

.card .card__inner .card__media {
  background: transparent !important;
}

Outcome:
The solution successfully resolved the transparency issue, and the user confirmed it worked as intended.

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

Ok so the site is www.litmeup.us/ and the password is lit

I’m using the Dawn theme.

Now this could be a problem with how the background image was added but honestly I doubt that, here is the code that I used to insert the bg image in base.css:

.gradient {
    background: var(--gradient-background);
    background-attachment: fixed;
    background-image: url(https://cdn.shopify.com/s/files/1/0800/1808/0059/files/temp_background.jpg?v=1693241257) !important;
    background-color: transparent !important;
    background-position: top left !important;
    background-size: auto !important;
}

ask4help1.png
ask4help1.png2058×1144 336 KB

ask4help2.png
ask4help2.png1328×1000 181 KB

I just want the images to have no background have the background not repeat behind them. Kind of like this:

ask4help3.png
ask4help3.png1270×607 590 KB

Thanks again!

1 Like
2

Hi @ilistentoemo ,

This is David at SalesHunterThemes.

Thank you for your question.

You can try to follow these steps:

Go to Online Store → Themes → Actions → Edit code.

Go Assets folder → base.css file.

Add this following code at the bottom of page.

.card .card__inner .card__media {
  background: transparent!important;
}

Here are the results:

David_SHT_0-1693274401460.png
David_SHT_0-1693274401460.png3784×2624 809 KB

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

David | SalesHunterThemes team

1 Like
3

That worked great! Thanks so much for the swift reply :slightly_smiling_face:

1 Like
4

You’re welcome! I’m glad I could provide the information you needed.