title: How to use an image as cover with bootstrap
body: <p>I have to design a responsive website with Bootstrap 3 and CSS. For the cover I am using an image. It's dimensions are 4928 × 2747 (probably too large?).</p>
  
  <p>Until now I was integrating it like this:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="jumbotron cover"&gt;
    &lt;div class="container text-center"&gt;
      &lt;hr border-top="3px"&gt;
      &lt;h1 class="cover"&gt;Heading&lt;/h1&gt;
      &lt;a class="btn btn-cover" href="#" role="button"&gt;
        &lt;span class="glyphicon glyphicon-play"&gt;&lt;/span&gt;
        Check out the XX
      &lt;/a&gt;
    &lt;/div&gt; 
  &lt;/div&gt; 
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.jumbotron.cover {
    background-image: url('images/new/DSC_0750_cropped_blended.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    height: 700px;
    margin-bottom: 0px;
  }
  </code></pre>
  
  <p>Since thinking about the responsive-aspect, I figured that a fixed <code>height: 700px;</code> is not an option. But when I drop it, the image is cut at the bottom. I think the height of the cover-div now is defined by the sum of the heights of all elements in it. </p>
  
  <p>Basically I am asking myself where and how to define the height of a div when trying to keep things responsive?</p>