A user applied a custom background image to their Shopify store using CSS targeting the .gradient class, but the image now appears across the entire site including the announcement bar, header, and footer.
Problem: The background image is displaying in unwanted areas. The user wants to:
Remove the image from header, footer, and announcement bar
Keep these sections as solid colors (using theme variables like “background 1” or “accent 1”)
Solution provided: Replace the CSS selector from .gradient to body instead. This targets only the body element, preventing the background from appearing in header/footer components.
Code adjustment:
body {
background: var(--gradient-background);
background-attachment: fixed;
background-image: url(...);
background-position: top left !important;
background-size: auto !important;
}
The user confirmed this solution worked. A screenshot was shared showing the expected result with the background image contained to the main body area only.
Summarized with AI on November 24.
AI used: claude-sonnet-4-5-20250929.
Hi I recently added a custom background to my website I was wondering if there was a way to remove the photo from the header footer & announcement bar and make them a solid color again (background 1, accent 1 etc) here is the code I used to put the photo in
If you just want a body background image, then you can do it like this, replace ‘.gradient’ with ‘body’
body {
background: var(--gradient-background);
background-attachment: fixed;
background-image: url(https://cdn.shopify.com/s/files/1/0575/0623/4548/files/Untitled_Pinterest_Pin_1000_x_1500_px_603_x_612_px.jpg) !important;
background-position: top left !important;
background-size: auto !important;
}
