title: Laying Search Bar on Image
body: <p>I've been trying to put my search bar on top of my image and I'm not too sure what I'm missing. I've tried to change the positions, for the search bar and it seems like it isn't doing much except moving it around outside of the image.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.headerNav {
      position: fixed;
      top: 0;
      left: 0;
      height: 35px;
      width: 100%;
      background: #601F27;
  }
  
  .headerNav ul {
      margin: 0;
      padding: 0;
      list-style: none;
  }
  
  .headerNav li {
      float: left;
  }
  
  .headerNav a {
      display: block;
      width: 10em;
      margin: 0;
      text-decoration: none;
      font-weight: 700;
      color: white;
      text-align: center;
      height: 35px;
      line-height: 35px;
  }
  
  .headerNav a:hover {
      background: #f9d4cc;
  }
  
  .container {
      margin: 1.2rem 10rem 1rem 10rem;
      padding: 1rem;
      position: relative;
  }
  
  .container img {
      height: 425px;
      width: 1500px;
  }
  
  form {
      width:500px;
      /*margin:0 auto;*/
      position:relative; 
      z-index: -1;
  }
  .search { 
      padding:0px 200px 25px 0px;
      margin:0px; 
  }
  
  input[type=text] {
      color: white;
      font-size: 50px;
  }
  
  input[type=button], input[type=button]:hover {
      position:absolute; 
      left:0px;
      border:1px solid #adc5cf;
      background: #e4f1f9; /* Old browsers */
      background: -moz-linear-gradient(top, #e4f1f9 0%, #d5e7f3 100%); /* FF3.6+ */
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e4f1f9), color-stop(100%,#d5e7f3)); /* Chrome,Safari4+ */
      background: -webkit-linear-gradient(top, #e4f1f9 0%,#d5e7f3 100%); /* Chrome10+,Safari5.1+ */
      background: -o-linear-gradient(top, #e4f1f9 0%,#d5e7f3 100%); /* Opera 11.10+ */
      background: -ms-linear-gradient(top, #e4f1f9 0%,#d5e7f3 100%); /* IE10+ */
      background: linear-gradient(top, #e4f1f9 0%,#d5e7f3 100%); /* W3C */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4f1f9', endColorstr='#d5e7f3',GradientType=0 ); /* IE6-9 */
      color:#7da2aa;
      cursor: pointer;
  }
  
  .dark {
      width:95%;
      height:50px;
      padding:0px 0px;
  }
  
  .dark input[type=text] {
      border:1px solid #2a2e31;
      background-color:#2d3035;
      color:white;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;div class="header"&gt;
          &lt;div class="headerNav"&gt;
              &lt;nav&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="account.html"&gt;Log In / Sign Up&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/nav&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="container"&gt;
          &lt;img src="img/bg1.jpg" alt="" /&gt;
          &lt;div class="dark"&gt;
          &lt;form&gt;
              &lt;span&gt;&lt;input type="text" class="search square"&gt;&lt;input type="button" value="Search"&gt;&lt;/span&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Can anyone help with this problem ? My html/css isn't that great.</p>