Background image stuck to product grid PLEASE HELP!!

[ExoticSouls]

Hello, for some reason the code that i used to get a custom image background is attactched to my featured collection, when you scroll you can see what i mean. How can i fix that so my background is just in the back and still at all times!

My site is https://royalsurge.shop/collections/all (Password: 333)

The code i used for the background image:

.gradient {
background: var(--gradient-background);
background-attachment: fixed;
background-image: url(https://cdn.shopify.com/s/files/1/0026/9038/3931/files/outline_camo_copyyy.jpg?v=1700205581) !important;
background-color: transparent !important;
background-position: top left !important;
background-size: auto !important;
}

[tim · Accepted solution]

This happens because there is a number of elements matched by this selector. And each of these elements "starts" the background image from its top.

You need to undo this and rather assign transparent background to .gradient elements, but assign your background to body only.

Like this:

body {
  background: url(/cdn/shop/files/outline_camo_copyyy.jpg?v=1700205581) !important;
  background-attachment: fixed !important;
}

.shopify-section .gradient {
   background: transparent !important; 
}

You will still have your popups with transparent background, but thats another question.

[ExoticSouls]

worked, thank you so much!

[ExoticSouls]

Hello, for the popups how do i make them not transparent like you were saying? Any help means alot !