Add a custom background image to 404 pages

New Member
3 0 0

Hi there

I'm trying to add a background image to my 404 page on my testament theme. 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. Can anyone help me get the code right? I've been advised to add style tags, but I can't get it right it seems - I'm a bit out of my depth! Any advice would be much appreciated. Here's my attempt:

{
style="background-image: url("https://cdn.shopify.com/s/files/1/0248/0714/5547/files/Categories_pearls_black_3.jpg?871");
}

Screen Shot 404 liquid.png

0 Likes
Shopify Expert
667 170 235

Hi, @KatyB ,

This is Evita from On The Map.

 

You are using style tag incorrect. Add it like this:

 

 <div id="page" class="desktop-12 tablet-6 mobile-3" style="background-image: url(https://cdn.shopify.com/s/files/1/0248/0714/5547/files/Categories_pearls_black_3.jpg?871)">

 

 

Best,
Evita

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes
New Member
3 0 0
Oh my gosh thank you so much! It's done it!
Might you also be able to tell me how to correctly implement a style code
to change the text to white now? (my background image is black so now we
can't read the text, lol)
0 Likes
Shopify Expert
667 170 235

Sure, just add this style to text html tags: 

style="color: white"
On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes
New Member
3 0 0
I must have put it in the wrong place again:
[image: image.png]
Should they be on the other side of brackets?
0 Likes
New Member
4 0 0

Hey Evita, is there a way to make a background image applied using that code, to be full width? at the moment i still have the panels on each side but it would look better if it was full width. I've tried a few things but it still stays the same.

cheers

Tim

0 Likes
Shopify Partner
1404 138 195

@TimAU - can you share page link? I will check the code on browser now

you are welcome to contact me.
My email - suyash.patankar@gmail.com
0 Likes
New Member
4 0 0

sure, thanks, the store is not live yet so i will send you the password via email but URL is https://spelean-outdoor-estore.myshopify.com/404

0 Likes
Shopify Partner
1404 138 195

@TimAU - hello, yes please share the password and link to 04 page so that I can check 404 page

you are welcome to contact me.
My email - suyash.patankar@gmail.com
0 Likes
New Member
4 0 0

Hi @suyash1 ,

 

I posted it in the previous post, but 404 page can be reached at:

https://outdoorestore.com.au/404  or

https://spelean-outdoor-estore.myshopify.com/404

 

I have sent the password previously by email but have now sent it as a message as well.

 

Thanks, Tim

0 Likes