title: How to make the image take up whole space?
body: <p>I am making a website and I want to give an image in the header part.This is my code in the HTML file </p>
  
  <pre><code>&lt;header class="jumbotron"&gt;
          &lt;div class="container"&gt;
              &lt;div class="row row-header"&gt;
                  &lt;div class="col-xs-12 col-sm-8 col-md-12"&gt;
                      &lt;h1&gt;Tourister&lt;/h1&gt;
                      &lt;p style="padding:40px"&gt;&lt;/p&gt;
                      &lt;p&gt;We take inspiration from the World's best 
                          touring experiences, and create a unique experience. You will surely be surprised by our amazing offers and deals we
                          provide throughout the year !
                      &lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>And I have used this code in the CSS file.</p>
  
  <pre><code>.jumbotron
  {
  padding: 5px;
  margin: 0px auto;
  background: #7986cb;
  color: floralwhite;     
  background-image: url("../img/image6.jpg");
  background-repeat: no-repeat;
  
  }
  </code></pre>
  
  <p>Now the problem is that my image is not taking up the entire height and width of the jumbotron as in the image below.
  <a href="http://i.stack.imgur.com/Rd9T4.png" rel="nofollow">enter image description here</a></p>
  
  <p>I want it to take up the entire space.I have used images of different sizes but it's of no use.None is taking the entire space of the window.
  So any help is appreciated.Thanks in advance.</p>
  
  <p>N.B.: I have read other questions of images not taking the entire width in stack overflow but couldn't get it working.</p>