How to scale jumbotron bootstrap on larger monitors? - html

Question

I currently have a website that uses the jumbotron feature from bootstrap taken from the Codecademy "how to make a website" tutorial.
In it, it uses the following html:
<div class="jumbotron">
<div class="container">
<h1>Heading</h1>
<p>Tagline</p>
<button type="button" class="btn btn-lg btn-danger">Learn More</button>
<!--Learn More-->
</div>
</div>
and the following CSS:
.jumbotron {
background-image:url("flight.jpg");
height: 500px;
background-repeat: no-repeat;
background-size: cover;
margin-bottom:0px;
}
.jumbotron .container {
position: relative;
top:100px;
}
.jumbotron h1 {
color: #CC0000;
font-size: 48px;
font-family: 'Shift', sans-serif;
text-shadow:none;
}
.jumbotron p {
font-size: 20px;
color: #CC0000;
text-shadow:none;
}
The background image is not scaling properly when a larger monitor is used, and the image increases in size within the div, but the div stays the same size. The result looks like a zoom on the image rather than the image staying whole.
Any idea how to make it scale properly on larger monitors?

Answer 1

Change to
Oh I apologive for misunderstanding your question you need to edit the css for .jumbotron needs to be cover and position to center.
.jumbotron { background-size: cover; background-position: center; }
Add Container Div around Jumbotron!
<div class="container">
<div class="jumbotron">
<div class="container">
<h1>Heading</h1>
<p>Tagline</p>
<button type="button" class="btn btn-lg btn-danger">Learn More</button>
<!--Learn More-->
</div>
</div>
</div>

Answer 2

UPDATE 2:
This is helpful link. I think, your solution in jQuery.
UPDATE:
Here is solution.
background: url("flight.jpg") no-repeat center center;
height: 500px;
background-repeat: no-repeat;
background-size: 100%;
margin-bottom: 0px;
}
You can use #media query like this:
#media (max-width: 768px) {
.btn-responsive {
padding:2px 4px;
font-size:11px;
line-height: 1;
border-radius:3px;
}
}
#media (min-width: 769px) and (max-width: 992px) {
.btn-responsive {
padding:4px 9px;
font-size:12px;
line-height: 1.2;
}
}
With a #media query, you can write different CSS code for different
media types.
This helps when you want different layout for different media types
such as a screen or a printer, but also when you want different layout
for different devices, which is very useful when making web pages with
responsive design.
You can also have different layout when a user resizes the browser
window up or down to a certain width, or height.
More info.