How to modify website background to a specific picture?

[WK100]

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:

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

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

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

[Sweet_Savior_3]

@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

[Moeed]

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:

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

Best Regards,
Moeed

[WK100]

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

[WK100]

@Sweet_Savior_3

[WK100]

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

[PageFly-Richard]

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