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

waves · ‎06-12-2021

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!

Hardik29418 · ‎06-12-2021

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.

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

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

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

Community Blog Articles

Shopify Community

Support

Shopify

Quick Links