Custom background image for one specific page

[YSMF13]

I cannot for the life of me figure out what I’m doing wrong. I’m currently using Dawn theme version 15.1.0. I am wanting to use a custom background on a specific page — that page is using a page template. I tried to use the code in the accepted solution posted in the thread below but it does not work for me. I added the code before </head> in my theme liquid but the background image isn’t showing up. Please help 😞

https://community.shopify.com/c/shopify-design/how-to-add-custom-background-image-for-one-specific-p...

[polishedCode]

Hi @YSMF13 

Can you please share your store url with the page and the password if its password protected! 

[YSMF13]

Yes! Here you go. This is the page I’d like to have a custom background (preferably a repeated background). Password is callglorypass

https://www.callandglory.com/pages/link-in-bio

I was able to use a code to hide the header and footer, but any codes I’ve tried for a custom background has not worked. 

[polishedCode · Accepted solution]

Trying adding this code before </head> in the theme.liquid file

{% if request.path contains 'link-in-bio' %}
<style>
body {
  background-image: url('https://www.callandglory.com/cdn/shop/t/4/assets/linksbg_1024x1024.png?v=42887490713572844501727964047') !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important; /* Ensures the background image is centered */
}

.color-scheme-1{
background:transparent !important;
}
</style>

Change out the background image url if needed.

You should get something like this

 

[YSMF13]

Oh my gosh I could cry. This worked and it looks even better than I imagined!!! Thank you so much!

[polishedCode]

It looks awesome!

No problem! Glad I could help!