Adding a background image for a collection

Store Design
, ,

Topic summary

A user is attempting to add a faded football club logo as a background image behind all products in a specific collection. They’ve added custom CSS to the collection section targeting div elements with:

  • background-image: url(...) pointing to a Shopify CDN-hosted image
  • background-repeat: no-repeat
  • background-size: cover

Current Issue:
The CSS is producing multiple background images instead of a single image behind all products.

Status:
The problem remains unresolved. The user is seeking guidance on what they’re doing wrong with their CSS implementation. A screenshot has been shared showing the unintended multiple-image result.

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

Hi,

I want to add a faded football club logo behind all the products for a football club collection.

I have edited the theme and added the following to the custom css for the collection section:

div {
background-image: url(“https://cdn.shopify.com/s/files/1/0814/9418/0118/files/Birmingham_Faded_Logo.png?v=1763870228”)
background-repeat: no-repeat;
background-size: cover;
}

I am wanting a single image behind all the products. The result is multiple images like this:

Screenshot 2025-11-23 at 04.16.18
Screenshot 2025-11-23 at 04.16.181920×1433 358 KB

Any ideas what I am doing wrong?

Many thanks in advance.

2

@WilliamsMX div is used everywhere and hence background set for it is shown everywhere. You need to get the class name of the div tag where you want to set background.

Or you can set it to body so it will be visible only a single time on all the pages

4

Hi. Thanks for that. How do I get the class name? I would like it to be a single image behind all the images in the collection.

5

Hi - I found out how to do it.. I just inspected the elements in a browser and added the class to the custom css as suggested..

div .container .product-list {
background-image: url(“https://cdn.shopify.com/s/files/1/0814/9418/0118/files/Birmingham_Faded_Logo.png?v=1763870228”);
background-size: 100%;
}

1 Like
6

@WilliamsMX hello, is it working as per the need now?

7

Hi @WilliamsMX

Your CSS is currently adding a background to all your divs which is why every product has an image. Then target the collection grid container not the div using the specific class or ID. Set background-repeat:no-repeat; background-size:cover; background-position:center;. This gives you 1 logo for all your products without duplicating.