Проблема создания фонового изображения для div с автоматическим изменением размера

Question

Я боролся с этим в течение нескольких часов и не добился прогресса. Думал, что приеду сюда за помощью. Моя задача проста и распространена. Используя BS3, я пытаюсь иметь полноэкранный контейнер с фоновым изображением, которое будет изменяться при изменении размера браузера. Кажется довольно простым, но несколько решений, которые я нашел здесь, просто не работают. Вот где я нахожусь:

<section id="LandingRow"> 
<div class="LandingRowWrapper"> 
    <div class="container-fluid"> 
     <div class="row"> 

      <%--Visible in small, med, large devices.--%> 
      <div class="col-sm-6 col-sm-offset-6 hidden-xs"> 
       <div class="row"> 
       ...content... 
       </div> 

       <div class="row"> 
       ...content... 
       </div> 
      </div> 


      <%--Visible in xs devices only.--%> 
      <div class="col-sm-12 visible-xs"> 
      ...content... 
      </div> 
     </div> 
    </div> 
</div> 

... и мой CSS ....

.LandingRowWrapper 
{ 
    border-width: 1px; 
    border-top-style: solid; 
    border-bottom-style: solid; 
    border-color: #bbd8e7; 
    background-color: #ffffff; 
    background-image: url('../images/slider3.jpg'); 
} 

Многое оценили !!

Answer 1

Если вы хотите, чтобы фон покрывал как высоту, так и ширину контейнера, я бы использовал background-size: cover;. Если вы хотите, чтобы он просто масштабировался по горизонтали и поддерживал высоту, то background-size: 100;% должен сделать трюк.