I'm having trouble trying to display the top part of a background image under my current navigation bar. I've been unable to identify what mistake I may be making here.
Here is my HTML code:
<section class="jumbotron">
<div class="container">
<br>.<br><br>.<br><br>.<br><br>.<br><br>.<br><br>.<br><br>.
</div>
</section>
This is the CSS styling I am using:
.jumbotron {
background: url("../img/bg.jpg") no-repeat bottom #b1b0b6;
padding: 10% 2%;
margin-top: 5%;
background-size: cover;
text-align: center;
color: white;
position: relative;
overflow: hidden;
}
Currently, it displays like this:
However, the complete image looks like this:
You can see a live preview at:
I have tried various options but haven't found a solution yet. Is there a way to fix this issue?