CSS background-image cover div when rotateY on hover - html

Question

I have a card with a flip effect when hovering it. The card has a background image, and each side has a color to transparent gradient.
When the card flips, the background-image position is on top, over gradient and div content. Without background-image the effect is fine.
How can I solve this issue and put the image under content and gradient?
Here is a codepen with the code https://codepen.io/ramonsan/pen/QJpgrv
.flip-card {
perspective: 1000px;
height: 400px;
width: 300px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
padding: 1em;
padding-top: 5rem;
}
.flip-card-front {
background: -moz-linear-gradient(top, rgba(100, 153, 210, 1) 28%, rgba(109, 165, 218, 1) 55%, rgba(125, 185, 232, 0) 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(100, 153, 210, 1) 28%, rgba(109, 165, 218, 1) 55%, rgba(125, 185, 232, 0) 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(100, 153, 210, 1) 28%, rgba(109, 165, 218, 1) 55%, rgba(125, 185, 232, 0) 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6499d2', endColorstr='#007db9e8', GradientType=0);
/* IE6-9 */
color: white;
}
.flip-card-back {
transform: rotateY(180deg);
background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 1%, rgba(255, 255, 255, 1) 10%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 0) 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 1%, rgba(255, 255, 255, 1) 10%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 0) 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 1%, rgba(255, 255, 255, 1) 10%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 0) 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=0);
/* IE6-9 */
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
<div class="flip-card col-6 col-md-4 pb-4 mb-0">
<div class="flip-card-inner" style="background-image: url(https://images.wallpaperscraft.com/image/glare_circles_spots_background_dots_bright_61905_240x400.jpg);">
<div class="flip-card-front">
<h1>FRONT</h1>
</div>
<div class="flip-card-back">
<h2>Back</h2>
</div>
</div>
</div>

Answer 1

Consider using the background image inside the inner divs. I used a CSS variable to make it easy to handle and avoid defining the image within the CSS so you can keep adjusting it through the inline style.
.flip-card {
perspective: 1000px;
height: 400px;
width: 300px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
padding: 1em;
padding-top: 5rem;
}
.flip-card-front {
background:
linear-gradient(to bottom, rgba(100, 153, 210, 1) 28%, rgba(109, 165, 218, 1) 55%, rgba(125, 185, 232, 0) 100%),
var(--i);
color: white;
}
.flip-card-back {
transform: rotateY(180deg);
background:
linear-gradient(to bottom, rgba(255, 255, 255, 1) 1%, rgba(255, 255, 255, 1) 10%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 0) 100%),
var(--i);
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
<div class="flip-card col-6 col-md-4 pb-4 mb-0">
<div class="flip-card-inner" style="--i: url(https://images.wallpaperscraft.com/image/glare_circles_spots_background_dots_bright_61905_240x400.jpg);">
<div class="flip-card-front">
<h1>FRONT</h1>
</div>
<div class="flip-card-back">
<h2>Back</h2>
</div>
</div>
</div>