Background image disappears with background attachment fixed property - css

Question

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.

Answer 1

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;
}