FROM CACHE - en_header

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

Solved
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)

Accepted Solutions
AlexEffron
Shopify Partner
2683 387 1050

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 %}

 

View solution in original post

Replies 20 (20)
AlexEffron
Shopify Partner
2683 387 1050

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 %}

 

suyash1
Shopify Partner
6189 729 1034

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

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.

You are welcome to contact me - suyash.patankar@gmail.com, My timezone is GMT+5:30,to build shopify pages use pagefly | want to support?
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
6189 729 1034

@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

You are welcome to contact me - suyash.patankar@gmail.com, My timezone is GMT+5:30,to build shopify pages use pagefly | want to support?
AlexEffron
Shopify Partner
2683 387 1050
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
6189 729 1034
Sure, you can email me on email given bella.
You are welcome to contact me - suyash.patankar@gmail.com, My timezone is GMT+5:30,to build shopify pages use pagefly | want to support?
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!

AlexEffron
Shopify Partner
2683 387 1050

@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 %}
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. 

AlexEffron
Shopify Partner
2683 387 1050

@NadineJ 

You just need to copy the code and change this part

{% if request.path contains 'the-2021-agenda' %}
NadineJ
Tourist
3 0 1

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

Bluewaterindust
New Member
4 0 0

Hi @AlexEffron 

 

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' }});

AlexEffron
Shopify Partner
2683 387 1050

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

FromtheWest
New Member
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
New Member
1 0 0

help the code doesn't work 

 

 

JhonGonzalez207_0-1657217614376.png

 

JhonGonzalez207_1-1657217640827.pngJhonGonzalez207_2-1657217663608.png

thanks!! 

Eleftheria2022
Explorer
64 0 14

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.

LazeeBear
New Member
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!