How to fix a mobile background image on the Dawn theme?

Store Design
,

Topic summary

Mobile background image on Shopify’s Dawn theme not displaying as desired on phones; screenshots show a white space at the bottom.

  • Access shared via store URL and a password for review.
  • Proposed fix: edit code (Online Store > Themes > Edit code), open base.css, and add a .gradient rule to set a fixed background with a specific image, transparent background, top-left positioning, no-repeat, and a large background-size (initially 250%).
  • After applying, the white bottom gap remained on mobile per a follow-up screenshot.
  • Update: helper advised increasing background-size from 250% to 300% to remove the remaining white space and requested the solution be marked once confirmed.

Outcome/status: No confirmation yet that the 300% adjustment resolved the issue; discussion appears open pending user feedback.

Notes: Screenshots are central to showing the bottom white space on mobile; the solution revolves around CSS adjustments rather than theme template changes.

Summarized with AI on January 2. AI used: gpt-5.
1

Hello !! Can anyone let me know how to fix the background image of this mobile.

Im using dawn theme

Thank you :slightly_smiling_face:

Screenshot 2024-03-25 165351.png
Screenshot 2024-03-25 165351.png450×649 152 KB

2

Hi @shilpa_etsy ,

Could you please share your store url link?

Thanks

3

https://gleaming-goddess-theme.myshopify.com/

pass - gleaming goddess

4

can you please help ?? it’s imp

5

Hello @shilpa_etsy ,

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file base.css

Step 3: Add code

.gradient {
    background: var(--gradient-background);
    background-attachment: fixed;
    background-image: url(/cdn/shop/files/Untitled_design_1.png?v=1711300100);
    background-color: transparent !important;
    background-position: top left !important;
    background-size: 250% !important;
    background-repeat: no-repeat !important;
}

Thanks

6

Screenshot 2024-03-25 173109.png
Screenshot 2024-03-25 173109.png676×916 72.6 KB

Hi thank you !! but there’s still this white space at bottom

7 
background-size: 300% !important;

Please change this code and marked the solution @shilpa_etsy