1

I am working on flipping card pages that have a single image as a card background and they should look like the image is splited. And card flipping animation is made with transition, transform: rotateX, transform-style: preserve-3d;

After reading this question, Fixed position background image in Firefox doesn't work with the transformed element. Is this a FF bug?. I know it's impossible to attach background fixed with the viewport using only vanilla CSS and HTML in firefox and some browser because the element using transform change background-attachment: fixed into a scroll.

I know it could be an answer to separate a single image into multiple images, but it needs a lot of HTTP calls in real service.

So I want to make a javascript code that fixes the standard condition of the background image. Is there an way to fix the background image regardless of the transform object?

.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
  box-shadow: 4px 8px 16px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
  background: #333;
}

.wrapper {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-evenly;
  height: 100%;
}

.card,
.wrap {
  position: relative;
  width: 300px;
  height: 150px;
  border-radius: 12px;
  perspective: 350px;
}

.wrap {
  transition: 1.5s;
  transform-style: preserve-3d;
}

.card:hover .wrap {
  transform: rotateX(180deg);
}
.card:hover .wrap .front {
  transition: opacity;
  transition-delay: 0.4s;
  transition-duration: 0.25s;
  transition-timing-function: ease-in-out;
  opacity: 0;
}

.back,
.front {
  position: absolute;
  width: 300px;
  height: 150px;
  border-radius: 12px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: 50% 0;
  text-align: center;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  transition: opacity;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
  opacity: 1;
}

.front {
  background-image: url(https://wallpapercave.com/wp/wp5211914.jpg);
  background-attachment: fixed;
  background-position: top center;
  z-index: 1;
}

.back {
  transform: rotateX(180deg) translate(-50%, -50%);
}

.text-wrapper {
  color: #f2f2f2;
  font-size: 20px;
  text-align: center;
  height: 100%;
  font-family: Arial, Helvetica, sans-serif;
}
<body>
  <div class="frame">
    <div class="wrapper">
      <div class="card">
        <div class="wrap">
          <div class="front text-wrapper">
          </div>
          <div class="back text-wrapper">
          </div>
        </div>
      </div>
      <div class="card">
        <div class="wrap">
          <div class="front">
          </div>
          <div class="back">
          </div>
        </div>
      </div>
    </div>

</body>

Same code on codepen

If you want to see the result that I want, run the code in chrome, because it doesn't follow the spec that change background-attachment: fixed into a scroll.

It's the result I want.(Run in Chrome)

Chrome Result

Firefox Result.

Firefox Result

Hyeonseo Kim
  • 324
  • 3
  • 15

1 Answers1

0

adding these properties to .front class will fix the background

.front{
  background-size: cover;
  background-repeat: no-repeat;
}

updated codepen

M Adeel Ahsan
  • 183
  • 1
  • 9
  • I see your codepen in firefox, but this is not what I want, background image still has a standard to its container, not a viewport. For example, I need https://stackoverflow.com/questions/31100688/one-background-image-for-multiple-divs this kind of image for elements that have a `transform` property. – Hyeonseo Kim Apr 27 '21 at 08:43