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

Store Design
,
10

It’ll fit well on mobile because it’s a portrait image, but the same image will not fit well on desktop because you need a landscape image for desktop. There’s no way to make a portrait image look good on a landscape device. It’ll just stretch unnaturally.

The best way to do it is to have 2 images, one for desktop and one for mobile.

The code below is for a desktop and mobile version, top code is for the desktop, the code below is for mobile, you can change the url for both the images and add a desktop version (landscape) and a mobile version (portrait)

.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) {
    .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;
    }
}