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!

0 Likes
HardikDavra
Shopify Partner
2312 361 994

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

 

PageFly Landing Page Builder - #1 Choice For Responsive, SEO-friendly Landing, Product Page.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
suyash1
Shopify Partner
2979 320 499

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

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, my email - suyash.patankar@gmail.com
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly
waves
Tourist
3 0 0

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

0 Likes
suyash1
Shopify Partner
2979 320 499

@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, my email - suyash.patankar@gmail.com
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly
0 Likes
HardikDavra
Shopify Partner
2312 361 994

@waves Please provide the web page link to analyze.

PageFly Landing Page Builder - #1 Choice For Responsive, SEO-friendly Landing, Product Page.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
0 Likes
waves
Tourist
3 0 0

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

0 Likes
suyash1
Shopify Partner
2979 320 499
Sure, you can email me on email given bella.
You are welcome to contact me, my email - suyash.patankar@gmail.com
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly
0 Likes
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!

0 Likes
HardikDavra
Shopify Partner
2312 361 994

@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 %}
PageFly Landing Page Builder - #1 Choice For Responsive, SEO-friendly Landing, Product Page.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp