Cant remove background color from bootstrap nav over image slider

Question

To clarify, I am trying to change the second nav bar from the top to be transparent so you can see through it to the image behind it.

I applied this CSS to the navbar which usually will work for transparency:

#nav > .navbar-inner {
border-width: 0px;
-webkit-box-shadow: 0px 0px;
box-shadow: 0px 0px;
background-color: rgba(0,0,0,0.0);
background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(0,0,0,0.00)),color-stop( 100% , rgba(0,0,0,0.00)));
background-image: -webkit-linear-gradient(270deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
background-image: linear-gradient(180deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);

But I think there is something happening with the slider where, although the nav is inside the slider div, it is still pushing the slider image down. When I use margin-top:-2em to pull the slider back up underneath the nav, it still doesn't have transparency on the navigation. If you scroll down on the page, you will see the transparent background on the navigation as you should. Any tips are much appreciated.

Answer 1

use this in your style.css file.

.carousel-control.left {background-image:none;}
.carousel-control.right {background-image:none;}

Answer 2

• Change below height to 90%.

.carousel-inner { height: 100%; }

• And remove the top-margin for #imagebox .

cannot give top:0 for .carousel-control with the current markup since it will overlap the menu. Otherwise you should give white background color to the #nav-wrapper and bring it to front using z-index.

---

Another suggestion is that it will be better if you could add a new div with <div class="spotlight"> wrapping carousel-indicators , carousel-indicators , left carousel-control and right carousel-control .

.spotlight {
   position: relative;
   width: 100%;
   height: 90%;
}

Answer 3

Just remove the background-image from .carousel-control.right and .carousel-control.left

As you can see the below image, there is no color (technically background-image). Hope this is what you are looking for.

Answer 4

add this as Abdullah Ibn Farouk said

.carousel-control.left {background-image:none;}
.carousel-control.right {background-image:none;}

and this is for image to fit properly..

 .fill{
width: 100%;
  height: 100%;

  background-size: cover;
}

Answer 5

bootstrap.min.css更改

.carousel-control.left, .carousel-control.right { background-image: none; }