Hello, dear experts!
Such a problem: on some mobile devices, the background is not fully drawn …
.header {
Height: 565px;
background: url (/STyle/client/img/bg.png) NO-REPEAT TOP CENTER;
Background-Size: Cover;
}
Screen: http://prntscr.com/781vxs
What could be the problem and how to solve it?
Answer 1, Authority 100%
Try such a kit
. Header {
Background: URL (...) NO-REPEAT TOP CENTER;
-Webkit-Background-Size: 100%;
-moz-background-size: 100%;
-O-background-size: 100%;
Background-Size: 100%;
-Webkit-Background-Size: Cover;
-MOZ-Background-Size: Cover;
-O-background-Size: Cover;
Background-Size: Cover;
}
Answer 2, Authority 67%
I earned after I removed the Background-Repeat property: no-repeat;
In principle, it is not necessary when Background-Size: Cover;
Answer 3, Authority 33%
Typically, this happens when Width is used: 100% of the background image or the parent element. Because Such width will be calculated based on the screen width on the device in your case.
On the page, you apparently have an element that Width is more than 100% (screen width) and it is possible to scroll down the content left / right (maybe extra padding or margin stands, or a fixed width of some element is).
To get rid of this MIN-WIDTH for the background with the minimum width that you want to install, or correct the items that get out.