RoR - Banner Image below navigation not behind - html

Question

Have some basic trouble trying to get the image to sit below the navigation. At the moment it sits behind the navigation.
Each basic page will have a unique image for About Us, Contact Us, Term
Basic page HTML setup:
<header>
<div class="basicbanner">
<%= image_tag("1280x400-about.jpg", style: "background-image", class: "img-responsive", alt: "Diving Image") %>
<div class="container">
<div class="row">
<div class="basicbanner-title center">
<h1>About us</h1>
</div>
</div>
</div>
</div>
</header>
CSS Setup for Banner Postion:
.basicbanner {
min-height: 400px;
position: relative;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
.basicbanner-title {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 620px;
h1 {
text-transform: uppercase;
color: white;
}
}
With this setup it sits behind the nav still and trying to get it to sit below.
Not understanding where the conflict is happening and tried few methods as shown in the styling below.
Navbar CSS
.navbar {
border: 0px solid rgba(0, 0, 0, 0);
background: #70cbce;
//background: transparent;
margin: auto;
min-height: 60px;
padding-top: 10px;
position: fixed;
//top: -60px;
}
.navbar.open {
top: 0;
}
.navbar-inverse .navbar-nav > li > a, .navbar-nav a {
color: #fff;
font-size: 14px;
text-align: center;
vertical-align: middle;
line-height: 60px;
//letter-spacing: 1px;
}
.navbar-inverse .navbar-nav > li > a:hover {
color: #0a4f6f;
opacity: 0.6;
}
.nav > li > a {
position: relative;
display: block;
padding: 10px 10px;
}
.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
border-color: #4ec3cd;
}
.navbar-inverse .navbar-toggle {
border-color: transparent;
}
/* HEADER AND LOGO*/
.header{
padding-top:40px;
padding-bottom:50px;
width: 100%;
font-size:18px;
}
#logo {
float: left;
//margin-right: 10px;
//font-size: 1.7em;
//color: #fff;
//text-transform: uppercase;
//letter-spacing: -1px;
margin-top: -10px;
//font-weight: bold;
}
#logo:hover {
color: #fff;
text-decoration: none;
}
So need to get it to sit below the nav and also work responsively.

Answer 1

sorry, but it is not very clear to me what you are trying to obtain. Why are you keeping the image_tag over the navigation? The navigation html code should be on top, the image below the navigation. Then you can set the following properties:
overflow: hidden;
z-index : a negative or positive number;
z-index will make the different divs, that overflow, stay one over the other to show up. If you want to have the navigation overflow over the image with a trasparent background, the navigation should have
z-index: +1;
So that, when you hover with the mouse on the navigation the hover css style will work. The image should have:
z-index: -1;
Additionally you should position the two divs one over the other, I have used:
position: relative;
margin-top: -70px;
With position relative the div will be positioned relatively to the parent div, if you set this correctly could be the nav div, then with margin-top negative you will bring the image up, to overflow with the navigation div. In my case my navigation div had a 70px height so i used -70px, you should also check if the div has margin and padding.
I hope i did not miss anything and I have sometimes problems with the different windows sizes, so i use mediaqueries. For any additional information you can ask me, still there are tutorials online on how to do this, but I could not find them in my latest search.
Please do not downvote me if i totally misunderstood your requirement, I just though this was what you are trying to achieve.
Thanks
Best Regards
Fabrizio Bertoglio