[jeffmjackParticipant]

Hi,

I am attempting to make a card have different images as backgrounds for its front and back.

Per previous posts in this forum, I have inserted the following CSS in the Custom CSS window in Cornerstone.

The thumbnail view in the bottom right seems to correctly parse this, but then when I save the CSS the card turns into an apparently-empty element with no content or background image.

Page URL:
https://thegreencart.com/page2-2

CSS:

.x-face-content{
display:none !important;
}

.x-face-outer.front{
background:url(“https://thegreencart.com/wp-content/uploads/2016/12/new-turk-prov-not-cropped.png”) no-repeat !important;
background-size:100% !important;
background-position:center center !important;
}

.x-face-outer.back{
background:url(“https://thegreencart.com/wp-content/uploads/2016/12/turkey-prov-info.jpg”) no-repeat !important;
background-size:100% !important;
background-position:center center !important;
}

Any help would be greatly appreciated, thanks!

[LelyModerator]

Hello There,

Background by default depends on the height of the container where it is set. In your case, since you have hidden the content of the card using the following custom CSS, the card now is empty.

.x-face-content {
    display: none !important;
}

When it is empty, background will not show unless we set fixed height for the container. To fixed this, please add card-custom-bg on your card class field.
Then update above CSS to this:

.card-custom-bg .x-face-content {
    display: none !important;
}
.card-custom-bg .x-card-inner {
    height: 300px; /* Adjust this to your preferred height for the card*/
}

Hope this helps.

[jeffmjackParticipant]

Awesome, that does it, thanks!

A couple of notes for anyone trying to solve the same problem:

1. Make sure you add “card-custom-bg” to the Class field of the card in Customizer as Lely mentioned. No quotes, no period at the front.

2. Leave the standard content in the Title and Text fields for the cards, otherwise WP won’t generate the HTML that is being controlled by the x-face-content class’s CSS (which is how you set the height of the card).

[jeffmjackParticipant]

Here’s the complete CSS code if you want to copy and paste:

** note that you need to insert your own image URLs.

.x-face-outer.front{
  background:url("https://thegreencart.com/wp-content/uploads/2016/12/EXAMPLE.JPG") no-repeat !important;
  background-size: 100% !important;
  background-position: center center !important;
}

.x-face-outer.back{
  background:url("https://thegreencart.com/wp-content/uploads/2016/12/EXAMPLE.JPG") no-repeat !important;
  background-size: 100% !important;
  background-position:center center !important;
}

.card-custom-bg .x-face-content{
  display:none !important;
}

.card-custom-bg .x-card-inner {
    height: 300px !important; /* Adjust this to your preferred height for the card*/
}

[RupokMember]

Hey there,

Thanks for sharing. Let us know if you need any other assistance.

Cheers!

[Author]

Posts