Shopify themes, liquid, logos, and UX
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?
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 a solution. - Donate: Buy coffee ☕- or Paypal me ❤️
- Ryviu - Product Reviews app, collect consumer photo reviews, import reviews from AliExpress, Amazon, Etsy, Shoppe and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 3 months of Shopify for $1/month. Sign up now
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'!
Happy I could help 😊!
- Helpful? Like and Accept a solution. - Donate: Buy coffee ☕- or Paypal me ❤️
- Ryviu - Product Reviews app, collect consumer photo reviews, import reviews from AliExpress, Amazon, Etsy, Shoppe and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 3 months of Shopify for $1/month. Sign up now
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)
User | RANK |
---|---|
227 | |
167 | |
66 | |
53 | |
53 |
On our Shopify Expert Marketplace, you can find many trusted third party developers and fr...
By Arno Nov 27, 2023You've downloaded the Search & Discovery app from the Shopify App store, and as you're ...
By Skye Nov 8, 2023The year-end shopping season is just around the corner. Is a flash sale on your radar? Are...
By Jasonh Nov 6, 2023