Hi there
I’m trying to add a background image to my 404 page. I’ve pasted the code into the 404 liquid file, using the image URL from my settings files folder, but it’s not working. The webpage is displaying my code, and no image (should locate below the error text I created). Can anyone help me get the code right? Here’s the snippet I wrote:
{
style="background-image: url(“https://cdn.shopify.com/s/files/1/0526/4798/5339/files/sad_dog.jpg?v=1610890317”);
}
Hi,
oh wow – there is a lot of mix up going on here … first off, what element should be the one displaying that background? I assume for the sake of ease, that it’s the html page itself, i.e. I use the body element as the selector. If you want another element, replace that selector with the appropriate one:
Use the snippet above to replace your “code”
{
style="background-image: url("https://cdn.shopify.com/s/files/1/0526/4798/5339/files/sad_dog.jpg?v=1610890317");
}
Hope this helps,
Mario
Hi @r8r
fantastic when I had my image on the whole page ahahahah!
Anyway, yea sorry for my “mix”, trying to learn and am very passionate about coding. Ok my body is not the whole page but should be below the heading 4 and the “continue to shopping” bar. So how do I define this portion?
Thank you very much for help and your fast response 
Sorry I mean BETWEEN the heading 4 and the “continue to shopping” bar. My bad
@Max91 Can you please share the link to your page?
Hi Mario,
thank you again for your interest.
I tried to follow your instructions and tried to wander into the web to learn more about css. You told to define my selector which I didn’t want to be the whole body but just a portion. Eventually, I came up with this sheet and actually managed to obtain what I wanted. Hope this could help other users.
@Max91 I just got around to check the updates here. I’m glad you got to discover some CSS and find the correct application to get what you wanted!
Mario
Hi Mario,
I’ve just a couple of further doubts.
Look forward for your answer and again thank you very much for your support.
ad 1.) you probably want to upload the image to the /assets-folder. You then can use the asset_img_url filter to display that image.
ad 2.) if you use background-image still, you woulld probably want to use something like
.selector {
background-size: contain;
}
/* or – depending on the desig*/
.selector {
background-size: cover;
}
Hope this helps.
Mario
thx for the answer, could you please tell me how can I add a background image on the 404 page?
I tried and I found I can add background-image in the main tag,
I want to add :
theme.scss.liquid:{
.main-content{
position: relative;
z-index: 0;
}
.main-content::before {
content: “”;
background-image: url(404.jpg);
background-repeat: no-repeat;
background-size: inherit;
position: absolute;
width: 100%;
height: 100%;
top: 0%;
right: 0%;
z-index: -4;
background-position: 50%;
}
}
how could I add a specific class in the main tag on “theme.liquid”
@athena1991 - can you share the link to your store? What theme are you using?
Mario
Thank You for Your Response
solved by js:
look at it and please tell me Is this the standard method?
if (document.title.match(“404 Not Found”)){
document.querySelector(“.main-content”).classList.add(“backgroundimage-404”);
@athena1991 nah, that’s not the standard method.
I would not go for the page title as the trigger element – that’s a customizable string. You should have the class template-404 applied to your body element. Using that, you can react on it using plain vanilla CSS. Of course you could also use this in a JS-condition.
Hope this helps,
Mario