How Do I Make Background Image On Password Page Fill The Screen Dawn Theme?

Store Design
,

Topic summary

Goal: make a full-screen background image on the Shopify Dawn password page only, without affecting other pages.

Key solution (CSS in base.css): set background-size to 100% 100% and target only the password page with the selector body.gradient.password. Final working fix also targeted nested elements using body.gradient.password .gradient to override theme styles.

Responsiveness: use two images—landscape for desktop and portrait for mobile—controlled with a media query (@media max-width: 989px). Explanation: CSS (Cascading Style Sheets) controls page styling; media queries apply styles based on screen size.

Outcome: Original poster confirmed the image now fills the screen and appears only on the password page.

Open issues: Later participants report the image repeating on the email sign-up banner and the code not working on their sites, and ask how to use a different photo. These follow-up problems did not receive specific resolutions in the thread, so the discussion remains partially open.

Summarized with AI on December 19. AI used: gpt-5.
17

Hey! Don’t know why, I didn’t receive a notification for the previous reply you sent. Here’s the updated code

body.gradient.password, 
body.gradient.password .gradient {
    background: var(--gradient-background);
    background-attachment: fixed;
    background-image: url(https://cdn.shopify.com/s/files/1/0548/6742/7399/files/DesertTheme.jpg?v=1710722322) !important;
    background-color: transparent !important;
    background-position: top left !important;
    background-size: 100% 100% !important;
}

@media only screen and (max-width: 989px) {
    body.gradient.password,
    body.gradient.password .gradient {
        background: var(--gradient-background);
        background-attachment: fixed;
        background-image: url(https://cdn.shopify.com/s/files/1/0548/6742/7399/files/DesertTheme.jpg?v=1710722322) !important;
        background-color: transparent !important;
        background-position: top left !important;
        background-size: 100% 100% !important;
    }
}