Add a custom background to 404 page and change my text to white

Store Design
1

Hi, I would like to add a custom background image to my 404 page
https://cdn.shopify.com/s/files/1/0372/5144/8972/files/B7EBC0E0-D527-49F7-8FFB-12793D7630AE.jpg?v=1626951024

Here is my code. It doesn’t work -


  

    # {{ 'general.404.title' | t }}
    

{{ 'general.404.subtext' | t }}

    

      {{ 'general.404.link' | t }}{% include 'icon-arrow-right' %}

I would also like to change my text to white because the background is dark or add below my background. Attached is what it looks like now.

TribeFitCollec_0-1627560103657.png
TribeFitCollec_0-1627560103657.png1260×335 12.1 KB

Appreciate any help. :slightly_smiling_face:

2

hello @TribeFitCollec

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

body.template-404{

	    background-image: url( 'https://cdn.shopify.com/s/files/1/0372/5144/8972/files/B7EBC0E0-D527-49F7-8FFB-12793D7630AE.jpg?v=1626951024' );
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
	    }
3

Hi mate, thanks for the help.

I do need to make the text ‘white’ given the background is dark. where and how should I add

{
	color: #FFFFFF;
}

Attached is how it looks now with black text

TribeFitCollec_0-1627612826985.png
TribeFitCollec_0-1627612826985.png2507×1042 366 KB

4

hello @TribeFitCollec

Please provide website url and if your store is password protected then also provide password So I will check and provide a solution here.

5

Website: https://tribe-collective-gear.myshopify.com/

Password: I will send you the Password via DM

6

hello @TribeFitCollec please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

.template-404 .empty-page-content h1 {
	    color: #ffffff ;
}
.template-404 .empty-page-content  p {
	    color: #ffffff ;
}
7

Hi, the white text color change works for the font below. Heading is still in black

TribeFitCollec_0-1627664224723.png
TribeFitCollec_0-1627664224723.png839×226 196 KB

8

hello @TribeFitCollec remove my old code and update with this

.template-404 .empty-page-content h1 {
color: #ffffff !important;
}
.template-404 .empty-page-content p {
color: #ffffff !important ;
}

9

Works to the peach. thanks a ton.