Shopify themes, liquid, logos, and UX
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!
Solved! Go to the solution
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.
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 %}
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.
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 %}
do you have advice for the image to pop up clear? It's very blurry in the blackground
@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
I can however my website is currently password protected. Is there a way I could message you privately?
@waves Please provide the web page link to analyze.
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!
@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 %}
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.
You just need to copy the code and change this part
{% if request.path contains 'the-2021-agenda' %}
Wonderful! Duplicating and editing the code worked as well. Many, many, many thanks!
@NadineJ Thank you for the update.
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
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' }});
@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.
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
and here is a photo of the actual image that I want in just the body of the page
can you help please
help the code doesn't work
thanks!!
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.
I have tried the code, but it doesn't work for me. Is there another way to add a custom background image?
i love you, man
I can't get the code to work either. I'm using the Dawn theme
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?
@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.
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:
I have also uploaded the image to the assets folder as well...
Any help would be appreciated!
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
Hi how did you fix this?
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024