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

Solved
TribeFitCollec
Tourist
12 0 0

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. 

TribeFitCollec_0-1627560103657.png

 

 

Appreciate any help.  

0 Likes
Natztech
Shopify Partner
1889 489 1171

This is an 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;
	    }

 

Want to theme customize contact us E-mail : natztech2312@gmail.com | Whatsapp
PageFly Advanced Page Builder visit pagefly
TribeFitCollec
Tourist
12 0 0

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

 

0 Likes
Natztech
Shopify Partner
1889 489 1171

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.

Want to theme customize contact us E-mail : natztech2312@gmail.com | Whatsapp
PageFly Advanced Page Builder visit pagefly
TribeFitCollec
Tourist
12 0 0

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

Password: I will send you the Password via DM

0 Likes
Natztech
Shopify Partner
1889 489 1171

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

 

Want to theme customize contact us E-mail : natztech2312@gmail.com | Whatsapp
PageFly Advanced Page Builder visit pagefly
TribeFitCollec
Tourist
12 0 0

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

TribeFitCollec_0-1627664224723.png

 

0 Likes
Natztech
Shopify Partner
1889 489 1171

This is an 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 ;
}

Want to theme customize contact us E-mail : natztech2312@gmail.com | Whatsapp
PageFly Advanced Page Builder visit pagefly
TribeFitCollec
Tourist
12 0 0

Works to the peach. thanks a ton. 

0 Likes