Background image stuck to product grid PLEASE HELP!!

Store Design

Topic summary

A user encountered an issue where a custom background image was incorrectly attached to their product grid/featured collection, causing it to scroll with the content instead of remaining fixed.

Problem: The background image code using .gradient selector was applying to multiple page elements, making each element start the background from its own top position.

Solution provided:

  • Move the background image from .gradient to the body element
  • Set .gradient elements to transparent background
  • Use background-attachment: fixed on the body

Status: The initial issue was resolved successfully. A follow-up question emerged about popup elements now having unwanted transparent backgrounds, which remains unanswered.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

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

2

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.

1 Like
3

worked, thank you so much!

4

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