Image background for all pages in shopify website except the header and footer

[corenhance]

I have tried adding a custom image background to all the webpages in my website except the header and footer by:

1. Creating a file under snippets folder named background-image.liquid and adding the code below:

<style>
html, body,
[id*='shopify-section']:not([id*='announcement']):not([id*='header']):not([id*='footer']),
[id*='shopify-section']:not([id*='announcement']):not([id*='header']):not([id*='footer'])> [class*='background']{
    background: url("https://cdn.shopify.com/s/files/1/0725/0309/9644/files/Textured_background.webp?v=1736680999") !important;
    background-size: cover !important;
}
</style>

2. The I added a single line of code given below under the body in the theme.liquid file

{% include 'background-image' %}

This code almost worked and as I wanted it is not being applied to the header and footer. But also it is not being applied to some sections like multirows, image banner(with a png image), richtext, collage, featured collection, contact form and mostly all the sections.

website: https://corenhance.store

password: [email removed]

theme: craft

Now I am seeking for a solution for this.

Any kinds of help is appreciable. Thank You

[theycallmemakka]

Hi @corenhance

I have written custom CSS for this solution. Please follow below steps and let me know your feedback.

Follow these Steps:

1. Go to Online Store

2. Edit Code

3. Find theme.liquid file

4. Add the following code just above tag

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

[corenhance]

Hi @theycallmemakka

Thank you for your help. This code worked but there are some minute problems with the code that after applying the code all the buttons in the website are becoming transparent and the content box(for both which i have set custom transerancy and which are default) of the image banners are now tranparent.

Kindly, can give a solution for this also. Thank You

[theycallmemakka]

Hi @corenhance ,

Try adding below code just after previous code.

Thank you

[corenhance]

Hey @theycallmemakka

Thank You very much, it really worked. I appreciate your help