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

Question

Я пытаюсь сделать фиксированный 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;
}

Answer 1

Чтобы ответить на ваш комментарий, да, вы можете установить минимальную ширину, максимальную ширину или минимальную высоту, максимальную высоту в вашем 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;
}