Custom background image for one specific page

Solved

Custom background image for one specific page

YSMF13
New Member
5 0 0

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...

Accepted Solution (1)
polishedCode
Shopify Partner
24 9 10

This is an 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

Screenshot 2024-10-03 at 2.11.46 PM.png

If this fixed your issue please Like and Accept as a Solution!
For custom Shopify solutions contact us Polished Code
Leave A Coffee Tip ❤️

View solution in original post

Replies 5 (5)

polishedCode
Shopify Partner
24 9 10

Hi @YSMF13 

 

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

If this fixed your issue please Like and Accept as a Solution!
For custom Shopify solutions contact us Polished Code
Leave A Coffee Tip ❤️
YSMF13
New Member
5 0 0

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
Shopify Partner
24 9 10

This is an 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

Screenshot 2024-10-03 at 2.11.46 PM.png

If this fixed your issue please Like and Accept as a Solution!
For custom Shopify solutions contact us Polished Code
Leave A Coffee Tip ❤️
YSMF13
New Member
5 0 0

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

polishedCode
Shopify Partner
24 9 10

It looks awesome!

 

No problem! Glad I could help! 

If this fixed your issue please Like and Accept as a Solution!
For custom Shopify solutions contact us Polished Code
Leave A Coffee Tip ❤️