Incorrect Background Image on IPhone

Question

Incorrect Background Image on IPhone

Navigation

#1 by (0 votes)
#2 by (0 votes)

2

I'm using:

    <section class="parallax calltoaction section_padding_100"
    style="
        background-image: url('images/models_cover/landscapes.jpg');
        background-size:100% 100%;
        background-repeat: no-repeat;
    ">

When accessed by chrome, firefox and safari via desktop works perfectly as in the picture.

WhenaccessedviaAndroidChromebrowser,itworksperfectlyaswell.

ButwhenaccessingviaiPhonewiththedefaultbrowserorChrome,itlookslikethis.

I have already changed the background-size: by cover and container , but it stays the same.

css

asked by anonymous 04.08.2017 / 20:03

2 answers

Is there a non-angular limit for request post? I can not define a vector image as an application icon [duplicate]

score 0 · Answer 1

From what you can see in your HTML, you are using a class called parallax. Probably this class is using the background-attachment: fixed attribute, because it is through this property that the simplest effect of parallax is made.

What happens is that this kind of effect is not performative on mobile devices, usually smartphones, and most browsers disable it by default. However, on devices with iOS, the error described by you, which instead of disabling the background-attachment property with the fixed value, does a kind of zoom that is not what we expected.

The solution that can be done in the case of a responsive page, where you want to get the effect of parallax on the desktop and disable in mobile, is through JavaScript, modify the value of attribute background-attachment: fixed to scroll in all elements that use the .parallax class. Or, if you rely on resolution to find out if it's mobile or desktop, you can set it in a media query in CSS.

score 0 · Answer 2

Try the following code, it worked perfectly in my application

html {
    background: url(http://placebear.com/1200/800) no-repeat center center fixed;
    background-size: cover;
    height: 100%;
    overflow: hidden;
}
body{
    height:100%;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}