title: Bootstrap - 3 columns full responsive full height intro page
body: <p>Currently I'm working on a website for a restaurant / hotel / vineyard. There are supposed to be 3 separate websites that I want to connect on one intro page.</p>
  
  <p>I want to create an intro page which fills the full screen, 3 columns side by side, and each column with full height filled with a picture regarding to each site I want to link. </p>
  
  <p>I started to go about it like this:</p>
  
  <p><strong>Bootstrap Columns:</strong></p>
  
  <pre><code>&lt;div class="row intro-div no-gutters"&gt;
      &lt;div class="col-md-4 fill-res"&gt;&lt;/div&gt;
      &lt;div class="col-md-4 fill-wein"&gt;&lt;/div&gt;
      &lt;div class="col-md-4 fill-hotel"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.fill-hotel{
      height:100%;
      min-height:100%;
      background-image: url('../images/intro-hotel.jpg');
      background-repeat: no-repeat;
      background-position: top center; 
      background-color: #000000;
  }
  </code></pre>
  
  <p>It looks great on my screen and when I change the size of my browser it's responsive, but it changes the section of the picture. For example, if there were a head in the picture, when I use a larger screen, then the head would be cropped on a small screen.</p>
  
  <p>Any suggestions?</p>