title: bootstrap - how to put your navbar on top of your background image?
body: <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>