1

I use this bootstrap template. I want make carousel background images fixed, but when I add

background-attachment: fixed;

like this

<div class="carousel-item active" style="
background-image: url('http://placehold.it/1900x1080');
background-attachment: fixed;
">

I get what I what in chrome, but in firefox it works strange. In firefox, when slide is moving, image is not fixed. After slide stops, image is fixed. I didn't find reason why is this happening.

Community
  • 1
  • 1
Mark Afanasevich
  • 23
  • 1
  • 5

1 Answers1

0

This is a good question. It took me a while to figure out what is going on.

Bootstrap carousel uses transform: translateX(); to do its animating.

.carousel-item-next:not(.carousel-item-left),
.active.carousel-item-right {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

.carousel-item-prev:not(.carousel-item-right),
.active.carousel-item-left {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

Transform translate will move the fixed background image left or right, regardless if the background is fixed. Unlike position or anything else, the background image stays fixed where ever the element moves. It's a bummer.

I tried to hack it for ages, by putting an extra div with an extra child div for the background, but I could not get my head round the classes. I was trying to reverse translate the background image when the slide is transitioning to give the effect of it being fixed, but then the background image on the next slide needs to not animate. Very confusing. Not sure how this can be done with a slider that uses translate to do its animating. https://www.codeply.com/go/vzVI1YkwYc

Maybe someone clever can figure this one out.

joshmoto
  • 4,472
  • 1
  • 26
  • 45
  • Seems that it is a bug in firefox, and it's still not fixed. https://stackoverflow.com/questions/39633745/background-attachment-fixed-with-transform-not-working-in-firefox – Mark Afanasevich Jan 18 '19 at 07:26
  • The thing is I can't even get the background to stay fixed in chrome on mac. Can you get this to work in chrome as expected? https://www.codeply.com/go/JDKtgxICPt – joshmoto Jan 18 '19 at 21:55
  • Heres another idea, but does not work on the last slide https://www.codeply.com/go/QbMKoAKA3T – joshmoto Jan 18 '19 at 22:12