title: Bootstrap: Background image z-index to show it above bg color
body: <p>See pen <a href="https://codepen.io/anon/pen/MKovPb" rel="nofollow noreferrer">here</a></p>
  
  <p>I've to code this image <a href="https://i.stack.imgur.com/8aN7A.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8aN7A.png" alt="enter image description here"></a></p>
  
  <p>this is what i'm doing </p>
  
  <pre><code>   &lt;div class="container-fluid"  id="contactbg"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-12 col-xs-12" id="info"&gt;
                  &lt;h1 &gt;Get More Information&lt;/h1&gt;
                  &lt;h2&gt;on our educational and training programs &lt;/h2&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="pos"&gt;
            &lt;div class="row" id="contact"&gt;
              &lt;div class="col-md-12 col-xs-12"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-md-4  col-sm-4 col-xs-12"&gt;
                         form here 
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>here is css </p>
  
  <pre><code>#contact {
      background:#0072d5;//blue 
      padding: 20px ;  
  }
  #contact .form-control{
      background: transparent;
      border-radius: 4px; 
      border-color: #fff;
  
  }
  #pos{position: relative;}
  #contactbg{
      position: relative;        
      background: url(../images/contact-bg.png) no-repeat ;
      background-position: right center;
      z-index: 99999999 !important;
  }
  </code></pre>
  
  <p>now this is what i get as output </p>
  
  <p><a href="https://i.stack.imgur.com/uysXx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uysXx.png" alt="enter image description here"></a></p>
  
  <p>how to  fix this pleas help  </p>