Adding Seamless Background Image on Single Page?

[cupofjeaux]

On the site (using Dawn v.11) I'm working on I need the background image to span multiple sections seamlessly on one page. 

https://bookclubforbaddies.com/pages/about

^ On this page, I need this pattern image: https://cdn.shopify.com/s/files/1/0685/0976/1820/files/b4b_background_low_opacity_30.png?v=169205687... (also uploaded separately in my Assets)

to span across several sections (The ones currently with white backgrounds: from the "Key Traits" rich text section, through the last image with text section) 

I tried adding the background image to that page specifically with this code in my theme.liquid:

{% if request.path contains 'about' %}
<style>
body {
background-image: url({{ 'b4b-background-low-opacity.png' | asset_img_url: 'original' }});
background-repeat: no-repeat;
background-size: cover;
}
</style>
{% endif %}

--- I've also tried:

{% if request.path contains 'about' %}
<style>
body {
background-image: url({{ "https://cdn.shopify.com/s/files/1/0685/0976/1820/files/b4b_background_low_opacity_30.png?v=1692056873" }});
background-repeat: no-repeat;
background-size: cover;
}
</style>
{% endif %}

----

And making the specific sections backgrounds transparent like so:

#shopify-section-template--20106916888860__d586341b-8fc0-4ad8-8fd7-dc6d876e4235 .gradient {
background: transparent !important;
}

I think it's the background image part that isn't working??

Is there something else I can try to add the image to the background of that specific page? 

[Dan-From-Ryviu]

Hi @cupofjeaux 

Please try to use this code 

{% if request.path contains 'about' %}
<style>
body {
background-image: url("https://cdn.shopify.com/s/files/1/0685/0976/1820/files/b4b_background_low_opacity_30.png") !important;
background-repeat: no-repeat;
background-size: cover;
}
</style>
{% endif %}

[cupofjeaux]

Oh my gosh, you're an angel, thank you!!! 

It's been driving me crazy and I knew I was missing something simple. 

Just 'bought you a coffee'! 

[Dan-From-Ryviu]

Happy I could help 😊!

[David_SHT]

Hi @cupofjeaux 

This is David at SalesHunterThemes.

Try to replace your code with this

{% if page.handle contains 'about' %}
<style>
body {
background-image: url({{ "https://cdn.shopify.com/s/files/1/0685/0976/1820/files/b4b_background_low_opacity_30.png?v=1692056873" }})!important;
background-repeat: no-repeat;
background-size: cover;
}
</style>
{% endif %}

[rlfoster]

Hi, I saw that you solved this problem. What was the solution?

[rlfoster]

Oops, never mind. I see the solution now.