Обложка фон не заполняет экран, когда экран больше, чем изображение

У меня есть фоновое изображение, которое составляет 1920x1080. Я хочу изменить размер и центрировать это изображение, чтобы заполнить экран и быть центрированным на все времена. Я использовал два различных подхода:Обложка фон не заполняет экран, когда экран больше, чем изображение

.background{ 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

.background{ 
    max-width: 100%; 
    max-height: 100%; 
}

Обе работы на настольном компьютере, который имеет разрешение 1280x1024 (Да, они все еще существуют). Но когда я просматриваю эту страницу на своем мобильном телефоне с разрешением 1920x10180, на портрете изображение не заполняет весь экран.

Desktop
Mobile phone

Как вы можете видеть изображение не заполняет экран, как предполагается, на мой мобильный телефон. cover не заполняет экран, когда он больше самого изображения? Если да, то как я могу это исправить?

EDIT: Полный стиль .background:

.background{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    background-position:center center; 
    filter: blur(3px); 
    -webkit-filter: blur(3px); 
    -moz-filter: blur(3px); 
    -o-filter: blur(3px); 
    -ms-filter: blur(3px); 
    z-index: 0; 
}

EDIT2: сгенерировать случайное изображение, чтобы быть background из <div class="background></div>:

<script type="text/javascript"> 
    var NUMBER_OF_IMAGES = 5; 
    var rand; 
    var setImage = false; 

    function randomIntFromInterval(min,max){ 
     return Math.floor(Math.random()*(max-min+1)+min); 
    } 

    //Generate random image 
    if(!setImage){ 
     rand = randomIntFromInterval(1, NUMBER_OF_IMAGES); 
     document.getElementById('background').style.background = 'url(img/' + rand + '.jpg) no-repeat center center fixed'; 
    }  
</script>

источник

2015-02-12 ikhebgeenaccount

Андроид по умолчанию браузер на вашем телефоне? –

Да, это проблема? Ну, это Хром. Это было по умолчанию на моем телефоне. Загрузка FF теперь для тестирования. – ikhebgeenaccount

@ShanRobertson С FF это также происходит. – ikhebgeenaccount

С фоном размера: крышка , фоновые изображения заполняют всю область. Ваш мобильный скриншот действительно выглядит так, как будто вы применили background-size: contains.

источник

2015-02-12 20:25:13 Ingvi

Уверен, что я использую 'cover'. Я не знаю, почему это так. – ikhebgeenaccount

И если вы измените размер своего браузера на рабочем столе, будет ли он действовать так же, как на вашем мобильном телефоне? – Ingvi

'input' dobresize, они более крупные, как и предполагалось. Фоновое изображение заполняет полный экран. Я думаю, проблема заключается в том, что высота изображения меньше, чем высота экрана на моем телефоне. – ikhebgeenaccount

В вашем JS используется стенографическое свойство background, которое не только устанавливает URL/повтор/позицию, но также перезаписывает свойство background-size, которое вы первоначально определили в своем CSS, с свойством по умолчанию.

Попробуйте добавить в свой JS, чтобы «сбросить» в background-size после динамического обновления фона:

document.getElementById('background').style.background = 'url(img/1.jpg) no-repeat center center fixed'; 
document.getElementById('background').style.backgroundSize = 'cover';

Также в вашем коде вы используете getElementById но есть селектор класса в CSS

Fiddle: http://jsfiddle.net/2vnasec5/

источник

2015-02-12 21:06:10 bags

Обложка фон не заполняет экран, когда экран больше, чем изображение

ответ

Смежные вопросы