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

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

#1

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:


#2

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


#3

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.


#4

Hello,

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


#5

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:


#6

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