css to make bootstrap navbar transparent

Question

I use bootstrap and I have a navbar in my html file I would like to make this nav bar transparent to show the background image. Can some one teach me how to do this with css? I tried the following css nothing happend

.navbar-inner {     background-color:transparent; }  <div class="navbar navbar-inverse navbar-fixed-top">             <div class="navbar-inner">                     <div class="container">                         <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">                             <span class="icon-bar"></span>                             <span class="icon-bar"></span>                             <span class="icon-bar"></span>                         </button>                         <a class="brand" href="#">lol</a>                         <div class="nav-collapse collapse">                             <ul class="nav pull-right">                                 <li class="active"><a href="/">Home</a></li>                                 <li><a href="about">About</a></li>                             </ul>                         </div>                     </div>             </div>         </div> 

Answer 1

Simply add this to your css :-

.navbar-inner {     background:transparent; } 

Answer 2

What you people are doing is unnecessary.

For transparent background, simply do:

<div class="navbar">  // your navbar content  </div>

without class navbar-default or navbar-inverse.