CODEWITHSUNDEEP
csscss-position
Aaron Balthaser
Aaron Balthaser

Reputation: 2644

Background image disappears with background attachment fixed property

I am trying to build a carousel that has a typical slide animation from one slide to the next. However each slide has an image in it that is going to much wider than the slide width and the image will pan animate before the carousel changes to the next slide. So the order is slide > pan image > next slide > pan image, and so on. The image requires some unusual complexity in that it must have a footer that is blurred. The only way I found to do this can be seen in the following codpen:

http://codepen.io/aaronbalthaser/pen/XKmQrG

Notice I set the body to flex and centered the elements for dev purposes. Next I created the elements that would be the actual carousel and I added the above codpen as child elements. Everything looks great which can be seen in the next codepen:

http://codepen.io/aaronbalthaser/pen/WxQWbM

The problem is the flex properties added to the body tag were only for development. Once I remove those properties the image disappears. That can be seen by deleting those properties in the second codepen. Additionally, once you delete those properties you can remove the fixed property found in the background shorthand and it appears again. But this property is needed to get the blurred effect the work. Ideally I need the following code to work.

HTML markup:

<div class="add-size">
  <div class="carousel">

    <div class="item">
      <div class="pan">

        <div class="container"> <!-- animation element -->
           <div class="inner">

              <div class="image"></div>

           </div>
        </div>

      </div>
    </div>

    <div class="item">
      <div class="pan">

        <div class="container"> <!-- animation element -->

          <div class="inner">

            <div class="image"></div>

          </div>

        </div>

      </div>
   </div>

  </div>
</div>

CSS:

.add-size {
  width: 300px;
  height: 250px;
  border: 1px solid red;
  position: relative;
  overflow: hidden;
}

.carousel {
  width: 600px;
  height: 250px;
  display: block;
  position: absolute;
}

.item,
.pan {
  width: 300px;
  height: 250px;
  display: block;
  float: left;
  overflow: hidden;

  position: relative;
}

.container {
  width: 400px;
  height: 300px;
  position: absolute;

  bottom: 0;
}

.inner {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}

.image {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: url(http://attic24.typepad.com/.a/6a00e551101c548834017d3d4fde82970c-500wi) no-repeat center center fixed;
  background-size: fill;
} 

.image:before {
  left: -5%;
  right: -5%;
  bottom: -5%;
  content: "text";
  position: absolute;
  height: 26%;
  width: 110%;
  background: url(http://attic24.typepad.com/.a/6a00e551101c548834017d3d4fde82970c-500wi)  no-repeat center center fixed;
  background-size: fill;
  -webkit-filter: blur(8px);
  filter: blur(8px);
}

Any assistance would be awesome. Thanks.

Upvotes: 0

Views: 481

Answers (1)

Rob Barber
Rob Barber

Reputation: 121

Using the fixed background-attachment property set to fixed, sets it against the viewport's position. You shouldn't use fixed. Drop it and just use background-size: cover instead of fill.

.image {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: url(http://attic24.typepad.com/.a/6a00e551101c548834017d3d4fde82970c-500wi);
  background-size: cover;
}

Upvotes: 1

Related Questions