title: Keeping a bootstrap carousel as a static background with text on top
body: <p>So I'm trying to implement something like this:</p>
  
  <p><a href="http://bootsnipp.com/snippets/featured/carousel-static-headline-caption" rel="nofollow">http://bootsnipp.com/snippets/featured/carousel-static-headline-caption</a></p>
  
  <p>Where there is text with a carousel as a background. currently when I scroll through my carousel the text scrolls as well. Here's the carousel code I'm working with.</p>
  
  <p>HTML:
       
      
          
          
              </li>
              </li>
              </li>
          </p>
  
  <pre><code>    &lt;!-- Wrapper for Slides --&gt;
      &lt;div class="carousel-inner"&gt;
          &lt;div class="item active"&gt;
              &lt;!-- Set the first background image using inline CSS below. --&gt;
              &lt;div class="fill" style="background-image:url('image');"&gt;&lt;/div&gt;
              &lt;div class="carousel-caption"&gt;
              &lt;h1&gt;Text that I would like to stay&lt;/h1&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="item"&gt;
              &lt;!-- Set the second background image using inline CSS below. --&gt;
              &lt;div class="fill" style="background-image:url('image');"&gt;&lt;/div&gt;
              &lt;div class="carousel-caption"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="item"&gt;
              &lt;!-- Set the third background image using inline CSS below. --&gt;
              &lt;div class="fill" style="background-image:url('image');"&gt;&lt;/div&gt;
              &lt;div class="carousel-caption"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;!-- Controls --&gt;
      &lt;a class="left carousel-control" href="#myCarousel" data-slide="prev"&gt;
          &lt;span class="icon-prev"&gt;&lt;/span&gt;
      &lt;/a&gt;
      &lt;a class="right carousel-control" href="#myCarousel" data-slide="next"&gt;
          &lt;span class="icon-next"&gt;&lt;/span&gt;
      &lt;/a&gt;
  
  &lt;/header&gt;
  </code></pre>
  
  <p></p>
  
  <p>CSS:</p>
  
  <pre><code>    html,
      body {
          height: 100%;
  
      }
  
      .carousel,
      .item,
      .active {
          height: 100%;
  
      }
  
      .carousel-inner {
          height: 100%;
      }
  
  
      .carousel-caption {
          padding-bottom: 475px;
  
      }
  
      /* Background images are set within the HTML using inline CSS, not here */
  
      .fill {
          width: 100%;
          height: 100%;
          background-position: center;
          -webkit-background-size: cover;
          -moz-background-size: cover;
          background-size: cover;
          -o-background-size: cover;
          opacity: 0.9;
          top: 50px
      }
  
      footer {
          margin: 50px 0;
      }
  body {
      width: 100%;
      height: 100%;
  }
  
  html {
      width: 100%;
      height: 100%;
  }
  
  @media(min-width:767px) {
      .navbar {
          opacity: 0.6;
          -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
          -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
          transition: background .5s ease-in-out,padding .5s ease-in-out;
      }
  
      .top-nav-collapse {
          padding: 0;
      }
  
  }.intro-section {
      height: 100%;
      padding-top: 150px;
      text-align: center;
      background: #fff;
  }
  
  .about-section {
      height: 100%;
      padding-top: 150px;
      text-align: center;
      background: #eee;
  }
  
  .services-section {
      height: 100%;
      padding-top: 150px;
      text-align: center;
      background: #fff;
  }
  
  .contact-section {
      height: 100%;
      padding-top: 150px;
      text-align: center;
      background: #eee;
  }
  </code></pre>