Can I have different images on each flip card

Support
#1

Hello
I have used some code found in another thread to replace the content of the front of the card with a background image which works perfectly and am now searching for a way to have different images for each card - I have created a row with 3 columns and a card in each.

Thanks very much
K

#2

Hi @norwestarch,

Thanks for writing in.

Then you need to add class to card element like my-class and your code will change to :

.my-class .x-face-outer.front {
  background-color: transparent !important;
  background: url("put image path here") no-repeat top center;
}
.my-class .x-face-outer.back {
  background-color: transparent !important;
  background: url("put image path here") no-repeat top center;
}

Hope that helps.

Let us know how it goes.

Thanks.

#3

Hi - this was great for what I needed, I just had to change the code a little to ensure the images were all the same as follows:
.my-class .x-face-outer.front {
background-color: transparent !important;
background: url(“put image path here”); background-size: cover;
}:grin:

#4

Glad to hear it’s sorted.

Cheers!