CSS Background-Position Not Working in Mobile Safari (Iphone/Ipad)

CSS: background-position + padding not working in Safari

See this previous question, it will probably answer your question - CSS3 background-position issue with Safari only For future reference, make a jsfiddle demonstrating the problem, so we can try to fix it ourselves before just giving you educated guesses.

CSS Background-position not working on mobile

Setting your bg image to cover means that it will want to stretch to the height of the screen, which means on a small device that you'll get a very narrow view of it. Personally, I'd either resize the image to be taller and thinner so that it fits better on a mobile screen, or instead set the background size to 100% auto, which looks pretty good imho.

Background image not working with Safari browser from my phone

Background Attachments have been disabled in mobile browsers.

Change background-attachment to something like background-size: cover.

For more information:

How to replicate background-attachment fixed on iOS

From the post:

Check this comment by @PaulIrish:

Fixed-backgrounds have huge repaint cost and decimate scrolling
performance, which is, I believe, why it was disabled.

---

Related Topics