A user working with Shopify’s Dawn theme encountered an issue where the “Picture with Text” block’s text overlay was obscuring parts of product images, specifically cutting off ground shadows. They wanted to make the text background transparent while maintaining the overlay layout.
Solution provided:
base.css fileOutcome:
The user confirmed the CSS solution worked perfectly, resolving the visibility issue without affecting the desired layout or image sizing.
Hi!
I’m using a “picture with text”-block in dawn theme and have overlayed the picture with the text. However, I still need the picture fully visible. Is there any possibility to set the background color of the text to transparent by coding to make the missing part of the picture become visible?
I know that I can switch off the overlaying but this affects the size of the picture and the general arrangement which I do not want.
Thank you so much!
Hi @Frede ,
Could you please share your Store URL and password (if applicable) so that I can review it and provide you with the appropriate solution code?
Looking forward to your response.
Thanks!
@Frede Can you please share this page link?
https://my-eloo.de/pages/vorteile
The problem is that the ground shadow of my product pictures is cut…
please add this css to the very end of your base.css file and check,
Shopify Admin → Online Store ->Theme → Edit code → base.css
@media screen and (min-width: 750px) {
.image-with-text .gradient {transform: perspective(0); background: transparent;}
}
Thank you so much!!! Works perfectly! 
Hi
Regarding the design concern with the “Image with Text” block in the Dawn theme. I understand that you’re looking to keep the text overlaid on the image without losing any visibility of the image itself and that disabling the overlay affects the overall layout, which you’d prefer to avoid.