css to make bootstrap navbar transparent

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>

Solution 1:

Simply add this to your css :-

.navbar-inner {
    background:transparent;
}

Solution 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.

Solution 3:

I was able to make the navigation bar transparent by adding a new .transparent class to the .navbar and setting the CSS like this:

 .navbar.transparent.navbar-inverse .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%);
}

My markup is like this

<div class="navbar transparent navbar-inverse">
            <div class="navbar-inner">....

Solution 4:

If you are using the latest version of Bootstrap and Ruby on Rails, you can just type it in the html.erb file as so:

<nav class="navbar navbar-transparent">

And that is all you need.