Adding Seamless Background Image on Single Page?

Store Design
, , ,
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=1692056873 (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
b4b background example.png1580×1772 442 KB

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?

2

Hi @cupofjeaux

Please try to use this code

{% if request.path contains 'about' %}

{% endif %}
3

Hi @cupofjeaux

This is David at SalesHunterThemes.

Try to replace your code with this

{% if page.handle contains 'about' %}

{% endif %}
4

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

1 Like
5

Happy I could help :blush: !

6

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

7

Oops, never mind. I see the solution now.