[pierrejdtParticipant]

Hello,

I would like to put an image in a flipcard in Cornerstone.
I’ve read other topics about the subject but I don’t understand very well, and my technical skills are low..
I would like to understand the process, as I have to put different cards, with differents images…

Can you help me ? Thanks a lot !

[JoaoModerator]

Hi There,

If you would like to replace the icon with an image.

on Card Element you can change Icon for an Image, take a look slowly on the options of the element and you will find.

If you would like to add a background to the card.

Please add the class card-1 to the card class field of your card element

And add this code to Appereance > Customizer > Custom > CSS

.x-card-outer.card-1 .x-face-outer.front .x-face-inner {
    background-image: url('http://new.yoursite.com/wp-content/uploads/2015/10/IMG_3534small.jpg');
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

Place the correct url instead of : http://new.yoursite.com/wp-content/uploads/2015/10/IMG_3534small.jpg

Hope that helps

Joao

[pierrejdtParticipant]

It works perfectly !

And if I want to do the same with the other side of the image, do you have the same code for me ?

Thanks a lot Joao my website is perfect because of you !!

[JadeModerator]

Hi there,

You can add another class to the second card card-2 then update the CSS code to:

.x-card-outer.card-1 .x-face-outer.front .x-face-inner,
.x-card-outer.card-2 .x-face-outer.front .x-face-inner {
    background-image: url('http://new.yoursite.com/wp-content/uploads/2015/10/IMG_3534small.jpg');
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

.x-card-outer.card-2 .x-face-outer.front .x-face-inner {
    background-image: url('http://new.yoursite.com/wp-content/uploads/2015/10/IMG_3534small.jpg');
}

Hope this helps.

[pierrejdtParticipant]

Ah but the thing is that it’s on the same card that I would like to put an image.
There is a front and a back but only one class available.. What can I do ? thanks a lot Jade

[JadeModerator]

Hi there,

Apologies for the confusion.

If you want to add the an image to the back area, please use this code:

.x-card-outer .x-face-outer.front .x-face-inner {
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

.x-card-outer.card-1 .x-face-outer.front .x-face-inner {
    background-image: url('http://new.yoursite.com/wp-content/uploads/2015/10/IMG_3534small.jpg');
}

.x-card-outer.card-1 .x-face-outer.back .x-face-inner {
    background-image: url('http://new.yoursite.com/wp-content/uploads/2015/10/IMG_3534small.jpg');
}

Hope this helps.

[Author]

Posts