Solved

Add a background image to 404 page

Max91
Tourist
6 0 2

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

Cattura.PNG
 

Accepted Solutions (2)

r8r
Shopify Expert
2555 327 940

This is an accepted solution.

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:

<style>
body {
  background-image: url("https://cdn.shopify.com/s/files/1/0526/4798/5339/files/sad_dog.jpg?v=1610890317");
}
</style>

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

★ Ja, man kann mich buchen; schreib mir eine Nachricht!
★ Hinterlass gerne ein Like und markiere meine Antwort gegebenenfalls als Lösung. Ich freue ich mich immer über eine Spende an die (Kinder)krebshilfe oder eine kleine Aufmerksamkeit.
Studio Mitte

View solution in original post

r8r
Shopify Expert
2555 327 940

This is an accepted solution.

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

★ Ja, man kann mich buchen; schreib mir eine Nachricht!
★ Hinterlass gerne ein Like und markiere meine Antwort gegebenenfalls als Lösung. Ich freue ich mich immer über eine Spende an die (Kinder)krebshilfe oder eine kleine Aufmerksamkeit.
Studio Mitte

View solution in original post

Replies 12 (12)

r8r
Shopify Expert
2555 327 940

This is an accepted solution.

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:

<style>
body {
  background-image: url("https://cdn.shopify.com/s/files/1/0526/4798/5339/files/sad_dog.jpg?v=1610890317");
}
</style>

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

★ Ja, man kann mich buchen; schreib mir eine Nachricht!
★ Hinterlass gerne ein Like und markiere meine Antwort gegebenenfalls als Lösung. Ich freue ich mich immer über eine Spende an die (Kinder)krebshilfe oder eine kleine Aufmerksamkeit.
Studio Mitte
Max91
Tourist
6 0 2

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 🙂

Max91
Tourist
6 0 2

 Sorry I mean BETWEEN the heading 4 and the "continue to shopping" bar. My bad

r8r
Shopify Expert
2555 327 940

@Max91 Can you please share the link to your page?

★ Ja, man kann mich buchen; schreib mir eine Nachricht!
★ Hinterlass gerne ein Like und markiere meine Antwort gegebenenfalls als Lösung. Ich freue ich mich immer über eine Spende an die (Kinder)krebshilfe oder eine kleine Aufmerksamkeit.
Studio Mitte
Max91
Tourist
6 0 2

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. 

 

img.PNG

r8r
Shopify Expert
2555 327 940

@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

★ Ja, man kann mich buchen; schreib mir eine Nachricht!
★ Hinterlass gerne ein Like und markiere meine Antwort gegebenenfalls als Lösung. Ich freue ich mich immer über eine Spende an die (Kinder)krebshilfe oder eine kleine Aufmerksamkeit.
Studio Mitte
Max91
Tourist
6 0 2

Hi Mario,

I've just a couple of further doubts.

  • While I was choosing the path for my jpg file, I wrote my Desktop/img.jpg path, because the directory is Desktop, but my store didn't display the image, while it worked using the url from Settings>File. Where's the mistake?
  • Also, would you please show me how to set the css in order to have a responsive image, automatically resizing on mobile too? 

Look forward for your answer and again thank you very much for your support.

r8r
Shopify Expert
2555 327 940

This is an accepted solution.

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

★ Ja, man kann mich buchen; schreib mir eine Nachricht!
★ Hinterlass gerne ein Like und markiere meine Antwort gegebenenfalls als Lösung. Ich freue ich mich immer über eine Spende an die (Kinder)krebshilfe oder eine kleine Aufmerksamkeit.
Studio Mitte
athena1991
New Member
4 0 0

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"

r8r
Shopify Expert
2555 327 940

@athena1991 - can you share the link to your store? What theme are you using?

Mario

★ Ja, man kann mich buchen; schreib mir eine Nachricht!
★ Hinterlass gerne ein Like und markiere meine Antwort gegebenenfalls als Lösung. Ich freue ich mich immer über eine Spende an die (Kinder)krebshilfe oder eine kleine Aufmerksamkeit.
Studio Mitte
athena1991
New Member
4 0 0

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");

r8r
Shopify Expert
2555 327 940

@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

★ Ja, man kann mich buchen; schreib mir eine Nachricht!
★ Hinterlass gerne ein Like und markiere meine Antwort gegebenenfalls als Lösung. Ich freue ich mich immer über eine Spende an die (Kinder)krebshilfe oder eine kleine Aufmerksamkeit.
Studio Mitte