Classic Card -- Image

[FXStretch]

Is it possible to use a custom image for the entire front of the classic card?

[friech]

Hi Lauren,

Thank you for writing in, yeah sure we can add a background-image on the front of the card. Please add this to the Page > CSS area.

.x-face-outer.front {
	background-image: url(IMAGE URL HERE);
	background-size: cover;
	background-repeat: no-repeat;
}

Replace the IMAGE URL HERE phrase with the actual URL of the image.

Hope it helps,
Cheers!

[FXStretch]

Thanks! In the series of three from the Gym homepage demo, it looks like that code replaces the background image for all three in a row. Is there a change to make sure it only changes one? I’d like to use a different image for each portion. Thanks!

[ruenel]

Hello @FXStretch,

The given code is a general code which will apply to all card elements. If you want to have different images for the card elements, please edit each of the cards, find the ID field and insert a unique ID like ‘card-1, card-2, card-3’. You will then need to update the given code into this:

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

#card-1 .x-face-outer.front {
	background-image: url(IMAGE URL 1 HERE );
}

#card-2 .x-face-outer.front {
	background-image: url(IMAGE URL 2 HERE );
}

#card-3 .x-face-outer.front {
	background-image: url(IMAGE URL 3 HERE );
}

Hope this make sense.