Docs

[kbosland]

Hello,
I would like a background image on my flipcard. I am following other threads but it is not working for me.

.flip1 {
background-image: URL(/wp-content/uploads/2016/11/greencar.jpg);
background-size: contain;
}

.x-face-outer.front {
background-color: transparent!important;
border-color: transparent!important;
}

[kbosland]

carbonclinic.com is the url

[Rupok]

Hi there,

It seems you have added the ID flip1 but using this as class on CSS. Let’s move flip1 from ID to Class field. Also you should use the absolute path of the image.

Cheers!

[kbosland]

great, thanks, it is repeating slightly, how would I stop that?

[Darshana]

Hi there,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[kbosland]

This reply has been marked as private.

[Paul R]

Hi,

I am sorry but I am not really sure what you mean by “repeating slightly”

This is how it works on my end – http://screencast.com/t/Sfki37pT

If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do, we’ll be happy to provide you with a response once we have a better understanding of the situation.

Thanks

[kbosland]

Do you see how the image of the car starts again, and the image of the fuel does the same? I just want one centered image

[Paul R]

Hi,

Sorry about that.

To prevent it from repeating, you can add background-repeat:no-repeat;

eg.

.flip1 {
    background-image: URL(/wp-content/uploads/2016/11/greencar.jpg);
    background-size: contain;
    background-repeat: no-repeat;
}

Hope that helps.

[kbosland]

Thanks, that fixed that part, but the image shrunk in width.

[Paul R]

Hi,

You can change background size to cover.

eg.

.flip1 {
    background-image: URL(/wp-content/uploads/2016/11/greencar.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

Hope that helps.

[kbosland]

Thanks Paul, that is much better.

I added for the .flip2 .x-face-text {
display: none;
}

When this happened, it made the card shrink in height. How do I maintain the size of it to a nice rectangle?

[kbosland]

I have added min height and some padding and it looks much better, except when I flip the card and then it shows the picture behind it and is too short.

Thanks,
Kathy

[Paul R]

Hi Kathy,

You can add this under Custom > Edit Global CSS in the Customizer.

.flip1 .x-card-inner,
.flip2 .x-card-inner,
.flip3 .x-card-inner {
    min-height:220px;
}

Hope that helps.

[Author]

Posts