Solved

how to add custom background image for one specific page in debut theme

waves
Tourist
3 0 0

Hello, 

I've been looking at so many different threads and youtube videos on how to add my own image and use it as a background image but nothing seems to work. I've tried adding different html codes into my theme.css which at one it worked. However I only want it on one specific page instead of it showing on each navigation page. Can anyone help me with this? What HTML code do I add and where so the back ground images shows up on only one page? I would also really appreciate it if you could help provide one code so that image repeats and another to void it from repeating

Please help!

Accepted Solution (1)

Hardik29418
Shopify Partner
2843 406 1070

This is an accepted solution.

Hello,@waves 
Welcome to the Shopify Community.

Please go to Online Store -> Pages -> the page in which you want to add background image -> Click on Edit website SEO -> Go to URL and handle and copy the last word of the handle.
e4e27e24-065f-47b3-a725-1aef1beba131.png

Please go to Online Store -> Themes -> Edit code -> Assets -> Upload your Image here. Copy the image name with extension.

Please go to Online Store -> Themes -> Edit code -> Layout -> theme.liquid and paste below code between <head></head>

{% if request.path contains 'page-handle' %}
<style>
body {
background-image: url({{ 'image-name-with-extension' | asset_img_url: 'original' }});
background-repeat: no-repeat;
background-size: cover;
}
</style>
{% endif %}

 

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email

View solution in original post

Replies 25 (25)

Hardik29418
Shopify Partner
2843 406 1070

This is an accepted solution.

Hello,@waves 
Welcome to the Shopify Community.

Please go to Online Store -> Pages -> the page in which you want to add background image -> Click on Edit website SEO -> Go to URL and handle and copy the last word of the handle.
e4e27e24-065f-47b3-a725-1aef1beba131.png

Please go to Online Store -> Themes -> Edit code -> Assets -> Upload your Image here. Copy the image name with extension.

Please go to Online Store -> Themes -> Edit code -> Layout -> theme.liquid and paste below code between <head></head>

{% if request.path contains 'page-handle' %}
<style>
body {
background-image: url({{ 'image-name-with-extension' | asset_img_url: 'original' }});
background-repeat: no-repeat;
background-size: cover;
}
</style>
{% endif %}

 

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
waves
Tourist
3 0 0

do you have advice for the image to pop up clear? It's very blurry in the blackground

suyash1
Shopify Partner
9032 1123 1482

@waves - if image is blurry then it can be either due to stretching or squeezing a lot, can you share page link where you have this popup

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video created using AI
waves
Tourist
3 0 0

I can however my website is currently password protected. Is there a way I could message you privately?

suyash1
Shopify Partner
9032 1123 1482
Sure, you can email me on email given bella.
To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video created using AI
Hardik29418
Shopify Partner
2843 406 1070

@waves Please provide the web page link to analyze.

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
NadineJ
Tourist
3 0 1

Good day!

Do the instructions below work on third-party themes such as BlockShop?

If so, if the text following the url of the page I want to add the background to, is three words long, such as the-2021-agenda, should the last word of the handle used be "agenda"?

I followed the steps below and was not successful loading a background image into a specific page.  Do I need to enter the full asset image url or do I just leave the words "asset_image_url" in the code.  The portion of the code I am referring to has been highlighted in red font.

Also, where in between <head></head> should I paste the code?  Does the code have to be indented?

Suggested Code - 

{% if request.path contains 'page-handle' %}
<style>
body {
background-image: url({{ 'image-name-with-extension' | asset_img_url: 'original' }});
background-repeat: no-repeat;
background-size: cover;
}
</style>
{% endif %}

Thank you in advance!

Hardik29418
Shopify Partner
2843 406 1070

@NadineJ  Please try this code. Please this code between <head></head> in theme.liquid

{% if request.path contains 'the-2021-agenda' %}
<style>
body {
background-image: url({{ 'image-name-with-extension' | asset_img_url: 'original' }});
background-repeat: no-repeat;
background-size: cover;
}
</style>
{% endif %}

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
NadineJ
Tourist
3 0 1

Fantastic! Your code worked perfectly!  Thank you for your prompt response. One last question, if I wanted to have a different background for three other pages, would I just have to adjust and replicate the code below three times?  

 

Thanks again for your help with this. 

Hardik29418
Shopify Partner
2843 406 1070

@NadineJ 

You just need to copy the code and change this part

{% if request.path contains 'the-2021-agenda' %}

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
NadineJ
Tourist
3 0 1

Wonderful!  Duplicating and editing the code worked as well.  Many, many, many thanks!

Hardik29418
Shopify Partner
2843 406 1070

@NadineJ  Thank you for the update.

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
Bluewaterindust
New Member
4 0 0

Hi @Hardik29418 

 

Im trying to add the image but am having issues and would really appriciate some help

 

I have uploaded the image and named it , BLUEWATER.see-our-work according to the page handle

Bluewaterindust_0-1653095067828.png

I have then pased the code as stated but the image doesnt show

 

Do i need to change this line of code?

url({{ 'image-name-with-extension' | asset_img_url: 'original' }});

Hardik29418
Shopify Partner
2843 406 1070

@Bluewaterindust Yes, you need to update this code.
url({{ 'image-name-with-extension' | asset_img_url: 'original' }});

Let me explain how to change it.

For example, if the image name which you have saved in the assets folder is 'see-our-work.png' then set code like this.

url({{ 'see-our-work.png' | asset_img_url: 'original' }});

If file name is 'image-background.jpg' then code be like

url({{ 'image-background.jpg' | asset_img_url: 'original' }});

Let me know if you need more guidance.

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
FromtheWest
Visitor
2 0 0

Hello I used this code for my about us page and it worked but it covers a lot of the page and it is super zoomed in so you can’t read or see the whole photo.

I’m guessing it’s because of this part of the code background-size: cover;

I want it to be in just the body of the about us page. And the footer is now right under it but with a big white space at the bottom. How can I fix it. 
Here is a photo of what it looks like 6BC550C5-D9DB-40B7-B1E6-820467A55C26.png

 

 

and here is a photo of the actual image that I want in just the body of the page

Aboutus.png
can you help please 

JhonGonzalez207
Visitor
1 0 0

help the code doesn't work 

 

 

JhonGonzalez207_0-1657217614376.png

 

JhonGonzalez207_1-1657217640827.pngJhonGonzalez207_2-1657217663608.png

thanks!! 

Eleftheria2022
Explorer
66 0 16

Hello, what an amazing assistance 😯 can we also got this change on "Email Sign Up" section or in "Image with text" section for changing the background color to an image?

Thanks in advance.

Teddy1234
Visitor
1 0 0

I have tried the code, but it doesn't work for me. Is there another way to add a custom background image?

 

Einars
Explorer
57 2 10

i love you, man

trucranems
Excursionist
27 0 11

I can't get the code to work either. I'm using the Dawn theme2023-01-27_175252.png

MartyMcflyGuy
Visitor
2 0 0

I cannot get my image to show I copied the code and followed the instructions. I was just trying to insert the letter in the center of the page above my content. Can you please assist?

 

suyash1
Shopify Partner
9032 1123 1482

@waves - you ca use the solution provided by @Hardik29418 

or please share your website link, we check if it has unique ids for each page, if they have then we can do it quickly or we will need to edit code to add unique id and then you can write any css for any page.

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video created using AI

LazeeBear
Visitor
1 0 0

Hi, 

 

I have been trying this code and many variations of it but cannot seem to get it to work at all. 

 

I have used the following code and no luck: 

 

LazeeBear_0-1661865286697.png

I have also uploaded the image to the assets folder as well... 

 

Any help would be appreciated! 

Eleftheria2022
Explorer
66 0 16

Hello @LazeeBear 

if you try to change the background photo in specific section i can help you

I found a solution for my request by myself

ezyaj
Visitor
2 0 0

Hi how did you fix this?