How can I center the background on mobile view?

Store Design

Topic summary

Main issue: Background image aligned correctly on desktop but shifted right on mobile; user asked how to center it on mobile.

Key solution (mobile): Add a CSS media query targeting screens up to 767px width and set background-position to center (e.g., “center center” with !important) on the body. This ensures the background image is centered specifically on mobile.

Technical notes:

  • background-position controls where the background image sits; “center” (or “center center”) centers horizontally and vertically.
  • A CSS media query @media (max-width: 767px) applies rules only on mobile-sized screens.
  • !important can override conflicting styles.

Implementation:

  • Add the CSS to theme.css or the end of timber.css via Online store → Themes → Actions → Edit code. Optionally use a Custom CSS app.

Follow-up issue: The fix didn’t apply to the password page.

Resolution for password page: Add a similar mobile media query targeting the password page container (selector .password-page__wrapper) and set its background-position to center.

Outcome: The pages were fixed, and a specific rule for the password page provides full coverage; the thread appears resolved.

Summarized with AI on February 7. AI used: gpt-5.
1

Hi everyone,

I have managed to make my background appear the way I want it on desktop but on mobile it sits a bit to right.

I was wondering how I can center it on mobile?

My website is www.tropixsm.co.uk

Password: 11223344

Thanks in advance

2

Add this CSS to end of your timber.css file or use this app to add Custom CSS.

body {
    background-position: center;
}
3

Hi @MarkTropism .

This is PageFly - Advanced Page Builder.

You can go to Online store => themes => actions => edit code and add this code on file theme.css

@media screen and (max-width: 767px){
   body {
     background-position: center center !important;
  }
}

Hope this answer helps.

Best Regards,

PageFly

1 Like
4

Worked like a charm! Exactly what I’ve been trying to do for ages!

Love you guys!

5

Hey @PageFly-Victor This worked perfect for all my pages but hasn’t applied to my password page. Is there an additional step for applying it to the password page?

6

Add this CSS for password page,

@media screen and (max-width: 767px){
.password-page__wrapper {
    background-position: center;
}
}