Background Image on just the products not the entire card

Store Design
1

Did a search before posting couldn’t find anything. Code to change the background just on the product and make it to where all the products have the same background repeated. Overall white background but image behind every product.

2

Use the media wrapper only.

.card__inner .media { background: url("your-image.png") repeat center/cover; }

Reference.

3

@croknok can you please share the page link where you are facing this issue?

4

Hey pal @croknok !

You can do this with a bit of CSS !

1. Online Store → Themes → Customize → Theme settings → Custom CSS (or base.css).

2. Add something like:

/* Change selector to match your theme's product card */
.card-wrapper {
  background-image: url("YOUR-IMAGE-URL-HERE");
  background-repeat: repeat;
  background-size: auto;   /* or 'contain' / custom */
  background-color: #ffffff;
}

Replace .card-wrapper with your theme’s product-card wrapper (use browser Inspect if needed) and swap in your background image URL. This will put the same repeated background behind every product card while keeping the page background white.

Hope this helps!

5

CSS to add the same repeated background to all products

.product-card {
background-image: url(“YOUR-IMAGE-URL-HERE”);
background-repeat: repeat; /* repeat the image /
background-size: auto; / adjust size if needed /
background-position: center;
background-color: #fff*; /* keeps overall background white /
padding: 20px; / optional spacing inside each product */
}

Steps:

  1. Upload your image in Shopify (Admin → Content → Files)

  2. Replace "YOUR-IMAGE-URL-HERE" with the image URL

  3. Save CSS

Result: all product cards have the same repeated image behind them, while the rest of the page stays white.

I hope this helps! By using the CSS above, you can give all your product cards the same repeated background while keeping the overall page white. Just upload your image, add the URL in the CSS, and apply it to your product card class (.product-card works for most Shopify themes). This will make every product show the background consistently without affecting the rest of the page.