Changing the Background image on Collection list

[crossovertees]

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?

[SomeUsernameHe · Accepted solution]

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 </head> tag.

<Style>

#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;
}

</Style>

DO NOT use <style></style> if pasting in a .css file, if you are pasting in theme liquid, make sure you use the <style> tags. 

Sorry for typos, on phone. 

[SomeUsernameHe]

Could we get your store URL to inspect the site with chrome tools?

[crossovertees]

www.crossovertees.com

[SomeUsernameHe]

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.

[crossovertees]

I'm not trying to change the color. I'm wanting to input an image.

[SomeUsernameHe]

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 */
}

[crossovertees]

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;
}

[crossovertees]

It wont save the photo has the error

[crossovertees]

[SomeUsernameHe]

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;
}

[crossovertees]

Still wont save. 

[SomeUsernameHe · Accepted solution]

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 </head> tag.

<Style>

#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;
}

</Style>

DO NOT use <style></style> if pasting in a .css file, if you are pasting in theme liquid, make sure you use the <style> tags. 

Sorry for typos, on phone. 

[SomeUsernameHe]

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. 

[crossovertees]

hey it worked. now only thing is its not a stagnet photo so when i scroll the photo moves. how do i change that.

[SomeUsernameHe · Accepted solution]

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;
}

[crossovertees]

Thank you

[SomeUsernameHe]

You are welcome! If you have any other questions, feel free to ask!

🙂 

[crossovertees]

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. 

[SomeUsernameHe]

Hmmm, sorry, any way you could show me a screenshot, not sure I follow. 

[crossovertees]

[crossovertees]

I want to keep the background on the collection list but have it matched up width wise with the banner above it.