How can I make product images and text boxes transparent on my theme background?

Store Design

Topic summary

A user added custom CSS code to their theme’s base.css file to set a background image, but encountered an issue where product images and text boxes displayed unwanted borders showing the same background pattern.

Problem: The .gradient class selector was causing the background to apply to multiple elements instead of just the main page background.

Solution: Another user recommended changing the CSS selector from .gradient to body, which would apply the background only to the page body element.

Outcome: The solution worked perfectly, resolving the transparency issue and achieving the desired effect of product images and text appearing cleanly over the main background image.

Status: Resolved - the user confirmed the fix was successful.

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

Hello,

I added the following code to base.css at the very bottom, the background seems fine and the way I want it. But the product images have a border of the same background image, as well as some of the text boxes. How can I make them all transparent so it is just the product pictures and text on the main background?

Code entered:

.gradient {
background: var(–gradient-background);
background-attachment: fixed;
background-image: url(https://cdn.shopify.com/s/files/1/0840/3969/6684/files/MultiCam_svg.png) !important;
background-color: transparent !important;
background-position: top left !important;
background-size: cover!important;
}

Store URL: https://backwoodsgeek.com/

2

@BackwoodsCamp Add your CSS with body not with the .gradient

body{
background: var(--gradient-background);
background-attachment: fixed;
background-image: url(https://cdn.shopify.com/s/files/1/0840/3969/6684/files/MultiCam_svg.png) !important;
background-color: transparent !important;
background-position: top left !important;
background-size: cover!important;
}
3

That worked perfectly! Thank you!