background-size:100% на мобильных устройствах

Я пытаюсь сделать фиксированный div с изображением, установленным как background-image. Я установил background-size на 100%, чтобы он не повторялся и не был слишком маленьким для больших разрешений экрана или при уменьшении масштаба. Проблема сейчас в том, что на мобильных устройствах фоновое изображение становится слишком маленьким и выходит за пределы видимой области.

Как я могу решить эту проблему? Есть ли лучшее решение, чем background-size:100%?

CSS:

.background {
position:fixed;
margin-top:65px;
height:400px;
background: url(../img/1111.jpg) no-repeat;
width:100%;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
background-size: 100% auto;
top:0px;
}

mobile html css fixed background-size
person sunilson    schedule 19.07.2014    source источник
comment
Могу ли я заставить фон перестать масштабироваться в определенный момент и вместо этого обрезать его?   -  person sunilson    schedule 19.07.2014

Ответы (1)


arrow_upward
0
arrow_downward

Чтобы ответить на ваш комментарий, да, вы можете установить минимальную ширину, максимальную ширину или минимальную высоту, максимальную высоту в своем CSS.

.background {
position:fixed;
margin-top:65px;
height:400px;
background: url(../img/1111.jpg) no-repeat;
width:100%;
min-width: 400px; /* change this to your choice */
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
background-size: 100% auto;
top:0px;
}
person Hunter    schedule 19.07.2014