I have a problem. I have googled this and tried everything suggested I could find and nothing seems to work. I have the Ride theme. I am trying to change the white background on just this one collection list on my home page to a custom graphic. Everything i try fails. Can anyone help? Is there a css code i can enter in the css section of just that on list that will do what i want it to do?
Could we get your store URL to inspect the site with chrome tools?
You can use the following css to target only that container:
#shopify-section-template--21930801430836__collection_list_rGCGE .color-background-1.gradient {
background-color: black !improtant;
}
Just change black to the color you want.
I’m not trying to change the color. I’m wanting to input an image.
I am so sorry about that, totally mixed that up. Here is the proper css:
#shopify-section-template--21930801430836__collection_list_rGCGE .color-background-1.gradient {
background-image: url('LINK_TO_YOUR_IMAGE');
background-size: cover; /* or contain, depending on how you want it to display */
background-position: center; /* this centers the image in the container */
background-repeat: no-repeat; /* this prevents the image from repeating */
}
Dosn’t want to work.
this is the code I had in there.
#shopify-section-template–21930801430836__collection_list_rGCGE .color-background-1.gradient {
background-image: url(https://cdn.shopify.com/s/files/1/0851/3771/9604/files/sea.png?v=1706644445);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
It wont save the photo has the error
Wrap your URL with ’ '.
#shopify-section-template--21930801430836__collection_list_rGCGE .color-background-1.gradient {
background-image: url('https://cdn.shopify.com/s/files/1/0851/3771/9604/files/sea.png?v=1706644445');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
Still wont save.
I would try pasting this in your theme files. if you have a base.css or main.css, if not you can open theme.liquid and save it right before eth closing tag.
#shopify-section-template--21930801430836__collection_list_rGCGE .color-background-1.gradient { background-image: url('[https://cdn.shopify.com/s/files/1/0851/3771/9604/files/sea.png?v=1706644445](https://cdn.shopify.com/s/files/1/0851/3771/9604/files/sea.png?v=1706644445)'); background-size: cover; background-position: center; background-repeat: no-repeat; }DO NOT use if pasting in a .css file, if you are pasting in theme liquid, make sure you use the tags.
Sorry for typos, on phone.
oh, wait, you are trying to add it to the section custom css.
Since it won’t let you add it to the section custom css, try your theme custom css.
hey it worked. now only thing is its not a stagnet photo so when i scroll the photo moves. how do i change that.
Awesome!!! Glad to hear it!
To get it to scroll with the page you can add this CSS:
background-attachment: scroll;
So your new CSS would look like this:
#shopify-section-template--21930801430836__collection_list_rGCGE .color-background-1.gradient {
background-image: url(https://cdn.shopify.com/s/files/1/0851/3771/9604/files/Copy_of_Colorful_Modern_Sale_Animated_Product_Video_1.png?v=1706652896);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: scroll;
}
Thank you
1 Like
You are welcome! If you have any other questions, feel free to ask!
1 Like
Do you know how to make it not full width? I want to make my banner and collection list smaller. the banner i can easily but the collection list dosnt have the feature.
Hmmm, sorry, any way you could show me a screenshot, not sure I follow.
