Password Page - Background Image - Mobile View Issue

Store Design
, ,

Topic summary

Issue: On the storefront password page (Dawn theme), a 16:9 background image looks correct on desktop but appears skewed toward the top on mobile. Switching to an 800×800 image fixes mobile but distorts the desktop view.

Proposed solution: Add a CSS rule to the image element using object-fit: cover to maintain aspect ratio while filling the container (may crop edges). Suggested steps: use Chrome DevTools to inspect the image, copy its CSS selector, then add a CSS snippet targeting that selector with object-fit: cover in the theme’s CSS.

Follow-up: The requester cannot follow these steps in Dawn 14.0.0 due to updated code structure and asks for step-by-step, version-specific instructions or screenshots on where to place the CSS and how to target the correct selector.

Status: Unresolved. Key next actions needed: detailed guidance for Dawn 14.0.0 on (1) the exact selector for the password page background image and (2) where to add the custom CSS.

Notes: Screenshots referenced are central to the suggested inspection/selector-copy process.

Summarized with AI on December 29. AI used: gpt-5.
1

Hi All,

I hope you’re doing well.

I am trying to setup the password page for my store which seems to be working fine. I am using the Dawn theme.

I have uploaded a background image with 16:9 aspect ratio which appears fine when I review my store on desktop. However, when I switch to the mobile preview screen, the image appears considerably skewed towards the top.

Then, I tried updating the background image set to 800x800px which seems to have fixed the mobile preview, but now the desktop preview is completely distorted and off.

Is there anyway to ensure the background image appears perfectly on both desktop and mobile? Please advise.

Many thanks,

H

2

Hi HxR,

The reason is that your image style is incorrect.

You can use the inspect feature of Chrome:

image.png
image.png1805×898 269 KB

Select copy selector:

image.png
image.png730×642 43.5 KB

Then go to edit theme, add the following code snippet into a CSS file:

/* copy selector content */ {
  object-fit: cover;
}

Hope this can help you.

Kind regards

3

Hi,

Thanks for your response.

However, I am unable to follow your instructions on my end. I believe this is because the code sections have updated in the new Dawn version 14.0.0. Are you able to share step-by-step screenshots/instructions on how to complete this in Dawn 14.0.0 please? Your help is much appreciated.