фон Создание изображения не-изменяемые

Question

Я использую Boostrap и я установить фоновое изображение на пустой DIV, используя следующую разметку и CSS:

<section id="process"> 
    <div class="container"> <img src="img/production.png" id="processicon" class="center-block"> </div> 
    <!--end container--> 
    <div id="processbg"></div> 
    <div class="container"> 
    <h2 class="text-center">materials and construction</h2> 
    <p class="text-center">The carbon neutral and responsibly sourced bamboo contributes to over 70% of the skis construction. The combined strength to weight ratio and consistency enables us to simplify and take a streamline approach to the skis construction.</p> 
    <p class="text-center">The search for the highest quality materials from around the globe has always been an essential role since day one.</p> 
    </div> 
    <!--end container--> 
    <img src="img/bigski.jpg" class="center-block bigski"> 
    <div class="container text-center"> 
    <h2 class="text-center more"><a href="#">read more</a></h2> 
    </div> 
    <!--end container--> 
</section> 
<!--end process--> 

И:

#processbg { 
    background: url(../img/process.jpg) no-repeat center 110% fixed; 
    height: 602px; 
    background-size: 100%; 
} 

Everything хорошо смотрится на настольных компьютерах и планшетах, но при просмотре на мобильных устройствах изображение становится очень маленьким и оставляет большие пробелы вокруг него. Это имеет смысл, потому что высота пустого div всегда равна 602 px, а фото уменьшается, когда область просмотра становится меньше. Есть ли способ сделать изображение невосприимчивым или есть какое-то другое решение для этого?

также ссылка на фактическую веб-страницу: http://skiest.ragne.me/. Вы можете щелкнуть ссылку PROCESS в навигации и перейти к указанной фотографии.

Благодарим за помощь.

Answer 1

Я думаю, что вы ищете background-size: cover; которые:

Масштаб фоновое изображение, чтобы быть как можно больше, так что область фона полностью покрыта фоновое изображение. Некоторые части фонового изображения может не быть в поле зрения в области позиционирования фона

source w3schools.com

Измените CSS на следующее и посмотрите, что работает для вас.

#processbg { 
    background: url(../img/process.jpg) no-repeat center 110% fixed; 
    height: 602px; 
    background-size: cover; 
} 

В качестве альтернативы вы можете просто удалить background-size декларацию и посмотреть, если это дает желаемый результат. По умолчанию auto, который должен оставить изображение в обычном размере.