Made a background image in such a way that it works.

body{ position: relative; min-height: 200vh } body:before { content: ""; display: block; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: -10; background: url(https://news.nationalgeographic.com/content/dam/news/photos/000/755/75552.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

BUT when you start to scroll the page on the mobile, the image twitches, due to the fact that the browser address bar goes up. How to make the image is not twitching? enter image description here

    1 answer 1

    Need to add properties for body (checked on iphone 5s)

     body { position: relative; min-height: 200vh margin:0; padding: 0; }
    • In the project on which I try to do it, these properties are already indicated, does not work - Serhiy Bilik
    • Well, this is a completely different question and task) - Profet
    • I was always interested in the question of why people rape the body, it is not easier to use the container for the needs. body generally reacts poorly to position properties and may behave unpredictably, since this is the main visible part of the document - Yuri