Q: Give Bootstrap banner more height on < 768px I am trying to find inspiration for a banner on the official Bmw page. The first banner with the text "Need for Speed: Real adrenalin in a digital racing game" I would like to something similar, but with a picture instead.
Demosite of what I made until now
I specially like the BMW page < 768px, where the video has a big height. How can I achieve that?


.banner {
  position: relative;
  overflow: hidden;
}
.banner .content {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: #fff;
  width:100%;
}
.banner .content h2 {
  font-size: 45px;
  margin-bottom: 20px;
}
.banner .content p {
  font-weight: 300;
  margin-bottom: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <title>TEMPLATE</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
<body>
<div class="banner">
  <div class="overlay"></div>
  <img src="https://www.jungleadventures.com/images/slider-03.jpg" class="img-responsive">
  <div class="content">
    <div class="container">
      <div class="col-md-8">
        <h2>Lorem ipsum dolor sit amet, consectetur</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.</p>
        <a href="#" class="btn btn-primary" role="button">Our Services</a>
      </div>
    </div>
  </div>
</div>
</body>
</html>



A: You could use HTML's picture element. What this means is that you can create a number of variations of the same image, each catered for your breakpoints so that the aspect ratio makes sense for each screen variation. 
I did write a blog on this, aimed primarily at SharePoint, but it might help you out: https://sharepointui.wordpress.com/2017/02/20/responsive-images-using-htmls-and-with-sharepoint-image-renditions/
<div class="image__wrapper">   
  <picture>
    <source media="(min-width: 1024px)" srcset="MyImage--xlarge.jpg">
    <source media="(min-width: 640px)" srcset="MyImage--large.jpg">
    <source media="(min-width: 400px)" srcset="MyImage--medium.jpg">
    <source media="(min-width: 0px)" srcset="MyImage--original.jpg">
    <img src="MyImage--original.jpg">
  </picture>  
</div>


A: By using background-image as per BMW site you can achieve the expected output, as show in the below working snippet, hope it helps :)


.banner {
  color: #fff;
  background: url('https://www.jungleadventures.com/images/slider-03.jpg') no-repeat center center;
  background-size: cover;
  padding: 100px;
}
.banner h2 {
  font-size: 45px;
  margin-bottom: 20px;
}
.banner p {
  font-weight: 300;
  margin-bottom: 10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="banner">
  <div class="container">
    <h2>Lorem ipsum dolor sit amet, consectetur</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua.</p>
    <a href="#" class="btn btn-primary" role="button">Our Services</a>
  </div>
</div>



A: You cannot achieve that using a picture. Bare in mind that when the screen is getting smaller, the picture's height and width are getting smaller as well. if you force a different height on the banner, the picture will get distorted.
With that in mind, use a picture with bigger height from the beginning, so that after the resize, it will still look good.
