Float the white background in full screen Bootstrap Carousel

Question

I want to keep the white transparent background color static and not slide. I want it to remain in the same place like the arrow. I just want only the text and the background image to slide. The arrow and the transparent background to remain where it is. How can I achieve this?

Demo: https://jsfiddle.net/55gfw2jg

$('.carousel').carousel({
  interval: 5000 //changes the speed
})

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

html,
body {
  height: 100%;
}
.carousel,
.item,
.active {
  height: 100%;
}
.carousel-inner {
  height: 100%;
}
.carousel-caption {
  padding: 15px;
  bottom: 0%;
  top: auto;
  height: 300px;
  background-color: rgba(250, 250, 250, 0.8);
  overflow-x: hidden;
  overflow-y: scroll;
  color: #000;
}
/* 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;
}
div {
  height: 100%;
}

<div>
  <div>
    <header id="myCarousel" class="carousel slide">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
      </ol>

      <!-- Wrapper for Slides -->
      <div class="carousel-inner">
        <div class="item active">
          <!-- Set the first background image using inline CSS below. -->
          <div class="fill" style="background-image:url('https://scontent.fdel1-2.fna.fbcdn.net/v/t1.0-0/p206x206/13413729_1332273040133438_4923141636508009165_n.jpg?oh=b2d551fe047e7ab1e576478d2479a73c&oe=57FC9B8E');"></div>
          <div class="carousel-caption">
            <h2>Caption 1</h2>
            <p>
              This is a sample text and it is a small paragraph. This is a sample text and it is a small paragraph. This is a sample text and it is a small paragraph. This is a sample text and it is a small paragraph. This is a sample text and it is a small paragraph.
              This is a sample text and it is a small paragraph. This is a sample text and it is a small paragraph. This is a sample text and it is a small paragraph. This is a sample text and it is a small paragraph. This is another sample text and is
              awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is
              another sample text and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is another sample text
              and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This
              is another sample text and is awesome.
            </p>
          </div>
        </div>
        <div class="item">
          <!-- Set the second background image using inline CSS below. -->
          <div class="fill" style="background-image:url('https://scontent.fdel1-2.fna.fbcdn.net/v/t1.0-0/p206x206/13418784_1336348086392600_1013125626105218969_n.jpg?oh=b64502fe8d0a189860c6a9a033f59da6&oe=5801E11D');"></div>
          <div class="carousel-caption">
            <h2>Caption 2</h2>
            <p>
              This is another sample text and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is another sample text and
              is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This
              is another sample text and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is another sample
              text and is awesome. This is another sample text and is awesome.
            </p>
          </div>
        </div>
        <div class="item">
          <!-- Set the third background image using inline CSS below. -->
          <div class="fill" style="background-image:url('https://scontent.fdel1-2.fna.fbcdn.net/v/t1.0-0/p206x206/13466497_1336348296392579_2409144383226693505_n.jpg?oh=7db5576e31809f18bffbd990811592b1&oe=57FA39BD');"></div>
          <div class="carousel-caption">
            <h2>Caption 3</h2>
            <p>
              This is the third paragraph and it is beyond awesome. This is the third paragraph and it is beyond awesome. This is the third paragraph and it is beyond awesome. This is the third paragraph and it is beyond awesome. This is the third paragraph and it
              is beyond awesome. This is the third paragraph and it is beyond awesome. This is the third paragraph and it is beyond awesome.
            </p>
          </div>
        </div>
      </div>

      <!-- Controls -->
      <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="icon-prev"></span>
      </a>
      <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="icon-next"></span>
      </a>

    </header>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Answer 1

How to keep the caption background stationary during sliding carousel

Unfortunately, we can't put a div with static background outside of the slide and apply the z-index property to it. We can't place such background between the caption and the slide because of the different stacking contexts:

Each stacking context is completely independent from its siblings: only descendant elements are considered when stacking is processed.

But we can put it as a separate element in the slide and make it run in the opposite direction.

Now, here, you see, it takes all the running you can do, to keep in the same place.

The formula for the parameter of the translate3d function is:

((100% - left) + 2 x left) / (100% - left)

Please check the result: https://jsfiddle.net/glebkema/eh3hqzeL/

$('.carousel').carousel({
  interval: 5000 //changes the speed
})

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

html,
body,
div,
.carousel,
.carousel-inner,
.item,
.active {
  height: 100%;
}

/* 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;
       -o-background-size: cover;
          background-size: cover;
}

.carousel-caption,
.static-bg {
  bottom: 0%;
  top: auto;
  height: 300px;
}
.carousel-caption {
  padding: 15px;
  overflow-x: hidden;
  overflow-y: scroll;
  color: #000;
}
.static-bg {
  background-color: rgba(250, 250, 250, 0.8);
  position: fixed;
}

/* Run in the opposite direction */
.carousel-inner > .item > .static-bg {
  -webkit-transition: -webkit-transform .6s ease-in-out;
       -o-transition:      -o-transform .6s ease-in-out;
          transition:         transform .6s ease-in-out;
          
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-perspective: 1000px;
          perspective: 1000px;
}
@media (max-width: 767px) {
  .carousel-inner > .item.next > .static-bg,
  .carousel-inner > .item.active.right > .static-bg {
    left: 15%;
    -webkit-transform: translate3d(-142.85714285%, 0, 0);
            transform: translate3d(-142.85714285%, 0, 0);
  }
  .carousel-inner > .item.prev > .static-bg,
  .carousel-inner > .item.active.left > .static-bg {
    right: 15%;
    -webkit-transform: translate3d(142.85714285%, 0, 0);
            transform: translate3d(142.85714285%, 0, 0);
  }
  .carousel-inner > .item.next.left > .static-bg,
  .carousel-inner > .item.prev.right > .static-bg,
  .carousel-inner > .item.active > .static-bg {
    left: 15%;
    right: 15%;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@media (min-width: 768px) {
  .carousel-inner > .item.next > .static-bg,
  .carousel-inner > .item.active.right > .static-bg {
    left: 20%;
    -webkit-transform: translate3d(-166.66666667%, 0, 0);
            transform: translate3d(-166.66666667%, 0, 0);
  }
  .carousel-inner > .item.prev > .static-bg,
  .carousel-inner > .item.active.left > .static-bg {
    right: 20%;
    -webkit-transform: translate3d(166.66666667%, 0, 0);
            transform: translate3d(166.66666667%, 0, 0);
  }
  .carousel-inner > .item.next.left > .static-bg,
  .carousel-inner > .item.prev.right > .static-bg,
  .carousel-inner > .item.active > .static-bg {
    left: 20%;
    right: 20%;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}

<div>
  <div>
    <header id="myCarousel" class="carousel slide">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
      </ol>

      <!-- Wrapper for Slides -->
      <div class="carousel-inner">
        <div class="item active">
          <!-- Set the first background image using inline CSS below. -->
          <div class="fill" style="background-image:url('https://scontent.fdel1-2.fna.fbcdn.net/v/t1.0-0/p206x206/13413729_1332273040133438_4923141636508009165_n.jpg?oh=b2d551fe047e7ab1e576478d2479a73c&oe=57FC9B8E');"></div>
          <div class="carousel-caption static-bg"></div> <!-- Static background -->
          <div class="carousel-caption">
            <h2>Caption 1</h2>
            <p>
              This is a sample text and it is a small paragraph. This is a sample text and it is a small paragraph. This is a sample text and it is a small paragraph. This is a sample text and it is a small paragraph. This is a sample text and it is a small paragraph.
              This is a sample text and it is a small paragraph. This is a sample text and it is a small paragraph. This is a sample text and it is a small paragraph. This is a sample text and it is a small paragraph. This is another sample text and is
              awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is
              another sample text and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is another sample text
              and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This
              is another sample text and is awesome.
            </p>
          </div>
        </div>
        <div class="item">
          <!-- Set the second background image using inline CSS below. -->
          <div class="fill" style="background-image:url('https://scontent.fdel1-2.fna.fbcdn.net/v/t1.0-0/p206x206/13418784_1336348086392600_1013125626105218969_n.jpg?oh=b64502fe8d0a189860c6a9a033f59da6&oe=5801E11D');"></div>
          <div class="carousel-caption static-bg"></div> <!-- Static background -->
          <div class="carousel-caption">
            <h2>Caption 2</h2>
            <p>
              This is another sample text and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is another sample text and
              is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This
              is another sample text and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is another sample
              text and is awesome. This is another sample text and is awesome.
            </p>
          </div>
        </div>
        <div class="item">
          <!-- Set the third background image using inline CSS below. -->
          <div class="fill" style="background-image:url('https://scontent.fdel1-2.fna.fbcdn.net/v/t1.0-0/p206x206/13466497_1336348296392579_2409144383226693505_n.jpg?oh=7db5576e31809f18bffbd990811592b1&oe=57FA39BD');"></div>
          <div class="carousel-caption static-bg"></div> <!-- Static background -->
          <div class="carousel-caption">
            <h2>Caption 3</h2>
            <p>
              This is the third paragraph and it is beyond awesome. This is the third paragraph and it is beyond awesome. This is the third paragraph and it is beyond awesome. This is the third paragraph and it is beyond awesome. This is the third paragraph and it
              is beyond awesome. This is the third paragraph and it is beyond awesome. This is the third paragraph and it is beyond awesome.
            </p>
          </div>
        </div>
      </div>

      <!-- Controls -->
      <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="icon-prev"></span>
      </a>
      <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="icon-next"></span>
      </a>

    </header>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>