shortcut shortcut - 1 year ago 44
CSS Question

Getting Navbar to act as an overlay for an image used in header div?

The issue I'm having is that I don't know how to get my navbar to act as an overlay for the image im using in my header div.

Here is the snippet of css code for navbar:

.nav {
position: absolute;
height: 769px;
border-right-style: solid;
border-right-width: 5px;
border-right-color: #fe5b1f;
width: 180px;
top: 0px;
bottom: 0px;
left: 0px;
background-color: black;
opacity: 0.5
}


I have attached my code using fiddle and this is what it I want the page the look like this

Answer Source

If you want to make the background color transparent, you can do that by using background-color: rgba(0, 0, 0, 0.5); where the last value in the brackets is the opacity where 1 is opaque and 0 is transparent.

.nav { 
    position: absolute; 
    height: 769px; 
    border-right-style: solid; 
    border-right-width: 5px; 
    border-right-color: #fe5b1f; 
    width: 180px; 
    top: 0px; 
    bottom: 0px; 
    left: 0px; 
    background-color: rgba(0, 0, 0, 0.5); 
    opacity: 0.5 
}

If you need to make the background image transparent, that's another story. You could use a separate pseudo element for the background to have it transparent.

nav:before {
    background-image: url(/path/to/image.jpg);
    position: absolute;
    height: 100%;
    width: 100%;
}

You may have to play around with z-index if you find that the image appears above the contents of the nav.

Hope this helps :)

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download