Increasing Height of Bootstrap Jumbotron but Remaining Responsive - html

Question

I have been playing around with Bootstrap's Jumbotron to place a background image. Extremely simple to do:
.jumbotron
{
background: url('path/to/images/banner.jpg') no-repeat center center;
background-size: cover;
}
and
<div class="jumbotron">
<div class="container">...</div>
</div>
It looks great and is responsive. However, the Jumbotron is only as large as the content inside it - of which I have very little. As a result, it is far thinner than I would like and I would like to increase its default height while still maintaining the responsiveness. So, for example, something like this doesn't work:
<div class="jumbotron">
<div class="container" style="height: 600px;">...</div>
</div>
It's the right height, but the image is no longer responsive. I have been looking into the various mixins/variables available to me hoping that something would pop out that I could leverage, but I'm not having any luck.

Answer 1

I'd do it with padding:
.jumbotron {
...
padding: 5em inherit;
}
By using relative units it scales.
Fiddle demo
Alternatively, use a minimum height:
.jumbotron {
...
min-height: 300px;
}
Fiddle demo
This allows the element to expand if needed.

Answer 2

You can achieve this by using relative padding-top and relative padding-bottom in the jumbotron css:
.jumbotron {
background: url('http://placekitten.com/800/500') no-repeat center center;
background-size: cover;
padding-top: 20%;
padding-bottom: 20%;
}
<div class="jumbotron">
<div class="container">
<h1>Your Text Here!</h1>
</div>
</div>

Answer 3

When you administer a fixed height, the image won't really play well with the container. You either forgo aspect ratio or size of the image. The best way is to find some common ground between your image aspect ratio and the size of the container. This is even more trickier when using background-image because you are relying on the container for everything.
So, instead of cover, try something like background-size: contain;. Play around with it to determine how the image scales and the likes. I usually have to do some maths before implementing a good bg-image. So, if your image is 1200x600, you can make the height adjust accordingly because you now know that the ratio between your width and height is 2:1. Here's where the responsive design comes in. You can change your .jumbotron height using #media() queries to reflect major screen sizes. At some point, you will overflow the image but at least it won't be by much because you have established that the .jumbotron won't go too far from the 2:1 ratio. background-size: cover doesn't care how the image scales. It forces it to cover the entire .jumbotron regardless of the image's aspect ratio. You can also implement some min-height instead of fixed height to ensure the .jumbotron isn't forced to be a certain size.

Answer 4

The below code works for all the screens :
.jumbotron {
background: url('backgroundimage.jpg') no-repeat center center fixed;
padding-top: 20%;
padding-bottom: 20%;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
The cover property will resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges.

Answer 5

You can use below code to adjust height of jumbotron.
greater the padding -> greater the height
smaller the padding -> smaller the height
.jumbotron {
padding: 0.1em 0.1em;
h1 {
font-size: 2em;
}
p {
font-size: 1.2em;
.btn {
padding: 0.5em;
}
}
}