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

[TribeFitCollec]

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=16...

Here is my code. It doesn't work - 

<div class="page-width">
  <div class="empty-page-content text-center">
    <h1>{{ 'general.404.title' | t }}</h1>
    <p>{{ 'general.404.subtext' | t }}</p>
    <p>
      <a href="{{ routes.root_url }}" class="btn btn--has-icon-after">{{ 'general.404.link' | t }}{% include 'icon-arrow-right' %}</a>
    </p>
  </div>
</div>

<style>
   .box {
     width: 800px;
     height: 720px;
     background-image:  background-image: url("https://cdn.shopify.com/s/files/1/0372/5144/8972/files/B7EBC0E0-D527-49F7-8FFB-12793D7630AE.jpg?v=1626951024");
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
     margin-left: auto;
     margin-right: auto;
     display: block;
   }
</style>

 
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. 

Appreciate any help. 🙂 

[Kinjaldavra · Accepted solution]

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

[Kinjaldavra · Accepted solution]

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

[TribeFitCollec]

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 

[Kinjaldavra]

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.

[TribeFitCollec]

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

Password: I will send you the Password via DM

[Kinjaldavra]

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

[TribeFitCollec]

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

[Kinjaldavra · Accepted solution]

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

[TribeFitCollec]

Works to the peach. thanks a ton.