Background image zoomed in on iPhone

Store Design
, ,

Topic summary

A user encountered an issue where their full-page background image displays correctly on desktop and Android devices but appears extremely zoomed in and pixelated on iPhones.

Original Implementation:

  • Used CSS with background-size: cover and background-attachment: unset in media queries
  • Applied to a .gradient class in base.css
  • Different image files for desktop vs. mobile viewports

Attempted Solutions:

  • Initial suggestion to change background-attachment to unset in mobile media query didn’t resolve the issue
  • Image only displayed correctly in header, not across full page

Working Solution:
Implemented a CSS fix using a pseudo-element approach:

  • Removed background from .gradient class on mobile (background: none !important)
  • Created body.gradient:before with fixed positioning
  • Set dimensions to 100vw and 100vh with z-index: -1
  • Applied background image to the pseudo-element instead

Status: Issue resolved successfully. The background now displays properly across all devices including iPhones.

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

This worked perfectly!! Thank you so much!