How to modify website background to a specific picture?

Store Design

Topic summary

A user seeks help applying a custom background image across their entire Shopify store. They’ve successfully used CSS to add the image to certain sections using the .gradient class, but several areas remain unaffected:

Problem areas:

  • Dropdown boxes displaying white backgrounds instead of the image
  • Specific text box backgrounds showing white/solid colors
  • Collapsible accordion sections not adopting the background

Solutions offered:

Multiple respondents provided CSS code targeting different elements:

  • One solution addresses .image-with-text sections and accordion/collapsible content areas
  • Another suggests adding code to the theme.liquid file above the </body> tag
  • A third recommends modifying base.css to target accordion summaries specifically

Current status:

The original poster tested one solution but reports it only partially resolves the issue, with some problem areas still showing white backgrounds. The discussion remains open as they seek a complete solution covering all mentioned sections.

Summarized with AI on November 16. AI used: claude-sonnet-4-5-20250929.
1

Hey There! I am wanting some help in changing the background of my website to be a photo. I am currently using this code in the Custom CSS box to make certain sections of my store have an image as the background:

.gradient {
background: var(–gradient-background);
background-attachment: fixed;
background-image: url(https://cdn.shopify.com/s/files/1/0818/7789/3427/files/Stained_Glass_Pattern.jpg?v=1695568145) !important;
background-color: transparent !important;
background-position: top left !important;
background-size: auto !important;
}

This code is working but there are certain sections that are still not switching over to this image that I would also like to be the image background instead of that solid color. See below:

WK100_4-1695569489933.png
WK100_4-1695569489933.png1767×804 106 KB

WK100_6-1695569539393.png
WK100_6-1695569539393.png1896×180 52.6 KB

WK100_2-1695569327620.png
WK100_2-1695569327620.png1877×728 150 KB

I also would like to change this particular text box background to be white instead of the image background:

WK100_5-1695569514164.png
WK100_5-1695569514164.png1767×804 103 KB

I also would like to change these dropdown boxes to be white instead of the image background:

WK100_7-1695569568373.png
WK100_7-1695569568373.png1472×762 100 KB

Link to Shopify: https://kdd0c82clvhfksze-81877893427.shopifypreview.com

2

@WK100

Please use the below CSS code.

.image-with-text.image-with-text--overlap {
    background: var(--gradient-background);
    background-attachment: fixed;
    background-image: url(https://cdn.shopify.com/s/files/1/0818/7789/3427/files/Stained_Glass_Pattern.jpg?v=1695568145) !important;
    background-color: transparent !important;
    background-position: top left !important;
    background-size: auto !important;
}
.image-with-text.image-with-text--overlap .content-container:after {
    background: white;
}
body .collapsible-row-layout .accordion summary,body .collapsible-row-layout .accordion .accordion__content, body .collapsible-content summary:hover {
    background: #fff;
}

Don’t forget to like and accept the solution. Contact for more queries.

Thanks

3

Hey @WK100

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1695570274238.png
Moeed_0-1695570274238.png1906×690 108 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

4

Where do I use this code? I posted into base.css and it looks like this still:

WK100_0-1695571025661.png
WK100_0-1695571025661.png1805×764 79 KB

5

@Sweet_Savior_3

6

Thanks Moeed but this only solves part of the question I had above. Do you have a solution for the other parts?

7

Hi @WK100

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:
Online Store ->Theme ->Edit code
Assets ->Base.css

.collapsible-row-layout .accordion summary {
  background-color: #fff !important;
}

Hope you find my answer helpful!
Best regards,
Richard | PageFly