bootstrap - how to put your navbar on top of your background image?
<p>I am new to bootstrap.
This is the design I am trying to make: 
<a href="https://i.stack.imgur.com/EV9A1.png" rel="noreferrer"><img src="https://i.stack.imgur.com/EV9A1.png" alt="enter image description here"></a></p>

<p>As you can see the navbar is on top op the background image.
This is what I have:</p>

<pre><code> &lt;!DOCTYPE html&gt;
    &lt;html lang="en"&gt;
    &lt;head&gt;
               &lt;meta charset="utf-8"&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
&lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"&gt;&lt;/script&gt;

&lt;style&gt;
        &lt;style&gt;
.navbar-default {
background: none;
border: none;
}

body{
    height:100%;
}
        html{
            background: url('sun.jpg') no-repeat center center fixed;
            -webkit-background-size:cover;
            -moz-background-size:cover;
            -o-background-size:cover;
            background-size:cover;
            background-position: 0 0;

        }
        &lt;/style&gt;

    &lt;/head&gt;
&lt;body&gt;

        &lt;nav class="navbar navbar-default"&gt;
            &lt;div class="container"&gt;
                &lt;ul class="nav navbar-nav"&gt; 
                    &lt;li class="active"&gt;&lt;a href="#"&gt;home&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;ask a question!&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;learn&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;contact&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/div&gt;

        &lt;/nav&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>gives:</p>

<p><a href="https://i.stack.imgur.com/8xpdU.png" rel="noreferrer"><img src="https://i.stack.imgur.com/8xpdU.png" alt="enter image description here"></a></p>

<p>I don't know how to put it on the image itself instead of above. </p>

<p>short sidequestion: what makes it that the picture from vimeo makes it look so much better than the image I use from the sun? on my image you can see all the pixels etc... Is this due to the fact that it might be a too small image and that it has to be stretched a lot to fit the whole page?</p>

<p>EDIT:</p>

<p>this is what I tried but didn't work</p>

<pre><code>    &lt;nav class="navbar navbar-default"&gt;
        &lt;div class="container"&gt;
            &lt;ul class="nav navbar-nav"&gt; 
                &lt;li class="active"&gt;&lt;a href="#"&gt;home&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;ask a question!&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="learn.html"&gt;learn&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;contact&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
            &lt;style&gt;
            .navbar{
                background:transparent;
            }
            &lt;/style&gt;
        &lt;/div&gt;

    &lt;/nav&gt;
</code></pre>