How can I add a background image to a 404 page?

Store Design

Topic summary

A user seeks help adding a background image to their Shopify 404 error page. A PageFly representative provides CSS code solutions targeting the page’s main section element.

Initial approach:

  • Add CSS to styles.css file via Theme Editor
  • Target body.error-404 with background image URL
  • Set background-size: cover and no-repeat

Issue encountered:
The background appears cropped on desktop and buggy on mobile devices.

Revised solutions:
The helper provides progressively refined CSS targeting specific Shopify section IDs (#shopify-section-template--16768092635401__main), including:

  • Absolute positioning for the container element
  • Transform properties for centering
  • Media queries for mobile responsiveness (max-width: 767px)
  • Adjusted padding values (66% and 100vh)

Status: The discussion remains ongoing as the user reports mobile display issues. The helper continues iterating on CSS solutions to achieve proper background rendering across devices.

Summarized with AI on November 22. AI used: claude-sonnet-4-5-20250929.
1

Hi guys! Can someone help me to add 404-page background image? Thanks

Screenshot 2023-03-09 at 15.23.04.png
Screenshot 2023-03-09 at 15.23.04.png2116×1306 277 KB

2

Hi @Personalizeful ,

This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/styles.css->paste below code at the bottom of the file:

body.error-404 {
    background: url("https://cdn.shopify.com/s/files/1/0661/9509/5817/files/Third_Banner_-_Mobile.jpg?v=1677012374") no-repeat;
    background-size: cover;
}

PageFlyRichard_0-1678368607469.png
PageFlyRichard_0-1678368607469.png1897×410 240 KB

I hope it would help you
Best regards,

Richard | PageFly

3

It appears cropped. Do you know another way?

4

Hi @Personalizeful ,

You can try replace previous my code by below code:

#shopify-section-template--16768092635401__main {
    background: url("https://cdn.shopify.com/s/files/1/0661/9509/5817/files/1607.m00.i125.n010.P.c25.347794790_Desert_mountains_sandstone_background_vector_illustration.jpg?v=1678369603") no-repeat;
    background-size: cover;
}
#shopify-section-template--16768092635401__main .section {
    position: relative;
    padding-bottom: 66%;
}
#shopify-section-template--16768092635401__main .container {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

I hope it would help you
Best regards,

Richard | PageFly

5

Its bugged for mobile version.

Screenshot 2023-03-09 at 16.42.26.png
Screenshot 2023-03-09 at 16.42.26.png760×1168 163 KB

6

Hi @Personalizeful ,

You can try below code:

#shopify-section-template--16768092635401__main {
    background: url("https://cdn.shopify.com/s/files/1/0661/9509/5817/files/1607.m00.i125.n010.P.c25.347794790_Desert_mountains_sandstone_background_vector_illustration.jpg?v=1678369603") no-repeat;
    background-size: cover;
}
#shopify-section-template--16768092635401__main .section {
    position: relative;
    padding-bottom: 66%;
}
#shopify-section-template--16768092635401__main .container {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
}
@media screen and (max-width: 767px) {
    #shopify-section-template--16768092635401__main .section {
        padding-bottom: 100vh;
        
    }
}

I hope it would help you
Best regards,

Richard | PageFly