Hi i’ve created a website http://betterclimates.com/ . It looks fine on a laptop, tablet and phone. However on a phone when I scroll around near my header which has a background image and navigation the image moves or adjusts itself which I don’t understand. I dont know why the image adjusts itself when it doesn’t on a laptop or tablet.
To see the full effect of this please view it on a smartphone.
The effect happens when you scroll past the heading “Welcome to Pro1Global.com”.
If you are talking about the faux parallax effect with the fixed background image then you are removing ‘fixed’ and changing the background-attachment to ‘scroll’ in your media queries for small screens.
This is generally done because mobiles historically don’t work very well with fixed positioned background images (when also using ‘cover’). I would leave it as it is assuming this was the issue you meant.
Generally it is best to avoid any fixed positioned elements on mobiles unless it’s the menu system driven from a small hamburger icon otherwise you eat up the available space with a fixed element always in the way of the content.
For background images I would just do what you have done already and let it scroll with the content. There are ways around it but all have downsides and complicate matters further when instead you should be simplifying for mobile for better experiences.