REMOVE BACKGROUND FROM PNG PRODUCT IMAGE ON HOMEPAGE

Store Design

Topic summary

A user is experiencing an issue where a PNG product image displays with an unwanted background on their homepage, while appearing correctly with transparency on the individual product page. They are using the Dawn theme on their Shopify store.

Proposed Solution:

  • A community member provided CSS code to address the background issue:
    • Navigate to: Online Store → Themes → Three Dots → Edit Code → theme.liquid
    • Add the provided CSS snippet under the <style> tag before the body section
    • The code targets .media.media--transparent.media--hover-effect and sets the background to black

Additional Suggestions:

  • Verify homepage background settings and custom CSS that may affect product images
  • Check for any overlays applied to the images
  • Consider adjusting theme settings or re-uploading the image if the issue persists

The discussion remains open, awaiting confirmation whether the proposed solution resolves the transparency issue.

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

IMG_2935.png
IMG_2935.png1206×2622 588 KB

i have uploaded a png image of my product, it is showing with this background on the homepage but it is fine in the individual product page.

url: 365ldn.com

password: EBOOST

1 Like
2

hi i am using dawn theme and the image is png file, when you click the product it will be transparent on product page but on the homepage there is a background. my url is 365ldn.com and the password is EBOOST

please can you have a look

3 
.media.media--transparent.media--hover-effect {
    background: black;
}

MustafA16_0-1742790258457.png
MustafA16_0-1742790258457.png340×709 305 KB

Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->
under the tag before the body ----->
if this code work please do not forget to like and mark it solution

do you want this

4

Try checking your homepage’s background settings or any custom CSS affecting product images. Also, ensure that the image is correctly formatted and that there are no overlays applied. If the problem persists, you may need to adjust your theme settings or re-upload the image. Just like ensuring a perfect website display, ensures top-quality home maintenance services. Let me know if you need further assistance!