Home css3 Background-Size: Cover - does not work correctly on mobile devices

Background-Size: Cover – does not work correctly on mobile devices

Author

Date

Category

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.

Programmers, Start Your Engines!

Why spend time searching for the correct question and then entering your answer when you can find it in a second? That's what CompuTicket is all about! Here you'll find thousands of questions and answers from hundreds of computer languages.

Recent questions