Tribute help needed! - Why does background become larger and static when viewed on iPad and iPhone?

Hello All,

I’m working on the tribute project and wondered if anyone might know why my page, when viewed on the iPad and iPhone, changes - background enlarges and becomes static?
On the ipad the background scrolls up with the main container and text but not when viewed on any laptop browser…?

https://codepen.io/MatWard/pen/LZxmqJ

Thanks in advance.

:slight_smile:

I think the code is a bit messy as I’m working out things as I go along. If anyone see’s anything they think is bad practice etc please feel free to shout it out!
Thanks

Hi - there is a bug in IOS with the “fixed” background property. Try just removing that property…i haven’t found it necessary with the “cover” property.

Hello,

Thanks for your help. I’m not sure what you mean but I will research it! Cheers :slight_smile:

Hi @MatWard,

Good work on your Tribute page - Very informative!
The page renders quite well on a Nexus 5X; and the background image remains fixed.
I can confirm the problems you are seeing on an iphone 5; removing background-size: cover; doesn’t fix it, unfortunately…

The only advice I can offer at this point is to separate the css portion from the html code , just to make the code easier to read :slight_smile:

Hi,
Thanks very much. I put up wrong page…here’s the correct one with css seperate as you mentioned.
Appreciate your feedback