-1

So I used Chrome Dev tools to check the responsiveness on an iphone and it looks fine. But when I check out the site on my actual iphone the background is completely different. Here is the link to my code https://github.com/CurtisKil/manesseGrading_2

How it looks on Devtools

How it actually looks on iphone

Kiran Dash
  • 4,816
  • 12
  • 53
  • 84
CurtisK
  • 11
  • 1
  • Hi @CurtisK. The issue is coming from `background-attachment: fixed;`. Please have a look at my answer to understand how to tackle this. – Kiran Dash Sep 11 '20 at 17:20

1 Answers1

0

The problem here is:

background-attachment: fixed; does not work well with most browsers and especially does not work properly on iOS. (Read more here on why: How to replicate background-attachment fixed on iOS)

Quick Fix: Don't use Background attachment fix for iOS.

So change your code in style.css from:

#home-section { background: url(../img/header-bg.jpg); background-repeat: no-repeat; background-size: cover; background-attachment: fixed; min-height: 800px; }

To:

#home-section { background: url(../img/header-bg.jpg); background-repeat: no-repeat; background-size: cover; min-height: 800px; }

Alternate Solution: Find workarounds for making background-attachment:fixed work for different browsers. Here is something to get you started:

  1. Fixed background image with ios7
  2. Fixed body background scrolls with the page on iOS7
Kiran Dash
  • 4,816
  • 12
  • 53
  • 84