Adding Seamless Background Image on Single Page?

cupofjeaux
Tourist
3 0 1

 

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) 

 

b4b background example.png


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? 

Cup of Jeaux Creative
Replies 6 (6)

Dan-From-Ryviu
Shopify Partner
8020 1563 1587

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 %}

- Helpful? Like and Accept solution to let me know or Buy me coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

cupofjeaux
Tourist
3 0 1

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'! 

Cup of Jeaux Creative
Dan-From-Ryviu
Shopify Partner
8020 1563 1587

Happy I could help 😊!

- Helpful? Like and Accept solution to let me know or Buy me coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

David_SHT
Globetrotter
605 125 124

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 %}

 

We create fast Shopify themes, focusing on exceptional performance and seamless experience across all devices.

Try our Electro theme Free! (Now at Black Friday price)

rlfoster
Shopify Partner
2 0 0

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

rlfoster
Shopify Partner
2 0 0

Oops, never mind. I see the solution now.