Hello, dear experts! Such a problem: on some mobile devices, the background is not drawn completely ...

.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?

    3 answers 3

    Try this varinat

     .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; }

      It worked for me after I removed the background-repeat: no-repeat; property background-repeat: no-repeat; In principle, it is not necessary with background-size: cover;

        This usually happens when width: 100% is used on the background image or on the parent element. Because this width will be calculated based on the width of the screen on the device in your case.

        On the page, you apparently have an element that has a width greater than 100% (the width of the screen) and it is possible to scroll content left / right (there may be an extra padding or margin, or some element has a fixed width).

        To get rid of this, add a min-width for the background equal to the minimum width you want to set, or correct the elements that come out.