I'm currently in the process of constructing a website using bootstrap.
Here's my HTML file:
<header class="navbar navbar-inverse navbar-static-top" role="banner">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">Santorini</a>
</div>
<nav class="collapse navbar-collapse" role="navigation">
<ul class="nav navbar-nav navbar-right">
<li><a href="committee.html">Committee</a></li>
<li><a href="events.html">Events</a></li>
<li><a href="constitution.html">Constitution</a></li>
</ul>
</nav>
</div>
</header>
<div class="jumbotron">
<div class="container">
<h1>Welcome</h1>
<p class="lead">Welcome to my site.</p>
<p class="lead"><a class="btn btn-large btn-primary" href="www.google.com">Join Us</a></p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4" align="center">
<a href="www.google.com"><img class="contact" src="img/facebook.png" height="120" width="120"></a>
</div>
<div class="col-sm-4" align="center">
<a href="www.google.com"><img class="contact" src="img/emailIcon.png" height="120" width="120"></a>
</div>
<div class="col-sm-4" align="center">
<a href="www.google.com"><img class="contact" src="img/twitter.png" height="120" width="120"></a>
</div>
</div>
</div>
The goal is to have a visually appealing jumbotron similar to what you see on getbootstrap.com, but larger. I want it to be at least twice the size of what it currently is.
In the <head> section of my HTML file, I've included a special rule for styling the jumbotron with an image and other content. Here's the code:
.jumbotron {
position: relative;
background: url('img/background.jpg') no-repeat center center;
overflow: hidden;
height: 100%;
width: 100%;
background-size: cover;
}
However, when I try adjusting the height, let's say to 500px, I don't see any change taking effect. It seems like the jumbotron adapts to the size of its container. I ideally want the entire picture to be visible without any cropping.
If anyone has suggestions or solutions, feel free to share. Your help would be greatly appreciated :)