Add a background image to 404 page

Solved
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
 

0 Likes
r8r
Shopify Expert
978 102 304

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

Mario Rader [he] ★ If you want to achieve greatness, stop asking for permission. ★ Studio Mitte
• Meine Antwort war hilfreich? Hinterlass bitte ein Like.
• Meine Antwort hat Dein Problem behoben? Bitte akzeptiere sie als Lösung.
• Ich hab dir etwas erspart? Ich freue ich mich immer über eine kleine Aufmerksamkeit
• Ja, ich biete Shopify-Services & -Entwicklung und freue mich von Dir zu hören!
• Bitte teile einen Link zu der Seite, deren Problem Du in deinem Beitrag beschreibst!

• Yes, I provide Shopify-services & -development. Feel free to get in touch!
• Please share a link to the site, which you refer to in your problem description. This incredibly increases the chances of you receiving a useful answer!
• My answer was useful? Please leave a Like.
• My answer solved your issue? Please accept it as the solution.
• I saved you time or money? I'm always happy to receive a little thank you.
0 Likes
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

0 Likes
Max91
Tourist
6 0 2

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

0 Likes
r8r
Shopify Expert
978 102 304

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

Mario Rader [he] ★ If you want to achieve greatness, stop asking for permission. ★ Studio Mitte
• Meine Antwort war hilfreich? Hinterlass bitte ein Like.
• Meine Antwort hat Dein Problem behoben? Bitte akzeptiere sie als Lösung.
• Ich hab dir etwas erspart? Ich freue ich mich immer über eine kleine Aufmerksamkeit
• Ja, ich biete Shopify-Services & -Entwicklung und freue mich von Dir zu hören!
• Bitte teile einen Link zu der Seite, deren Problem Du in deinem Beitrag beschreibst!

• Yes, I provide Shopify-services & -development. Feel free to get in touch!
• Please share a link to the site, which you refer to in your problem description. This incredibly increases the chances of you receiving a useful answer!
• My answer was useful? Please leave a Like.
• My answer solved your issue? Please accept it as the solution.
• I saved you time or money? I'm always happy to receive a little thank you.
0 Likes
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
978 102 304

@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

Mario Rader [he] ★ If you want to achieve greatness, stop asking for permission. ★ Studio Mitte
• Meine Antwort war hilfreich? Hinterlass bitte ein Like.
• Meine Antwort hat Dein Problem behoben? Bitte akzeptiere sie als Lösung.
• Ich hab dir etwas erspart? Ich freue ich mich immer über eine kleine Aufmerksamkeit
• Ja, ich biete Shopify-Services & -Entwicklung und freue mich von Dir zu hören!
• Bitte teile einen Link zu der Seite, deren Problem Du in deinem Beitrag beschreibst!

• Yes, I provide Shopify-services & -development. Feel free to get in touch!
• Please share a link to the site, which you refer to in your problem description. This incredibly increases the chances of you receiving a useful answer!
• My answer was useful? Please leave a Like.
• My answer solved your issue? Please accept it as the solution.
• I saved you time or money? I'm always happy to receive a little thank you.
0 Likes
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.

0 Likes
r8r
Shopify Expert
978 102 304

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

Mario Rader [he] ★ If you want to achieve greatness, stop asking for permission. ★ Studio Mitte
• Meine Antwort war hilfreich? Hinterlass bitte ein Like.
• Meine Antwort hat Dein Problem behoben? Bitte akzeptiere sie als Lösung.
• Ich hab dir etwas erspart? Ich freue ich mich immer über eine kleine Aufmerksamkeit
• Ja, ich biete Shopify-Services & -Entwicklung und freue mich von Dir zu hören!
• Bitte teile einen Link zu der Seite, deren Problem Du in deinem Beitrag beschreibst!

• Yes, I provide Shopify-services & -development. Feel free to get in touch!
• Please share a link to the site, which you refer to in your problem description. This incredibly increases the chances of you receiving a useful answer!
• My answer was useful? Please leave a Like.
• My answer solved your issue? Please accept it as the solution.
• I saved you time or money? I'm always happy to receive a little thank you.
0 Likes