CSS for only some background cards

Well it’s not straightforward because you would be filling all cards with a single image though, you can’t apply an if then else to it.

Right. CSS would apply to all cards. There’s no way to select cards using CSS based on the data found within the card (at least not that I know of).

1 Like

But wouldn’t an IFTHEN that adds an image based on the %, leaving others with an empty image, work to at least get the desired image showing on the desired cards? Then the necessary CSS to fill the card background would only “apply” to the ones that actually have an image. This is just theoretical and the way I’d imagine it would work.

Alternatively, could the list be sorted to only show 100% cards, apply CSS to that whole list, then add a 2nd inline list of non-100% cards (without any CSS on that list). I seem to remember an issue where the card’s sizing doesn’t properly adjust if some have an image and some don’t.

That If then will be card-specific only in the details view. You can’t do that when showing a whole list.

I made a CSS in this sense.
Give me a little time to give you an example.


Here is an example.
you can change the background picture based on a value or the like.
you can also use several different images for different cases.

The trick is to have an empty image to display if the condition is not met.
I made a 10x10px transparent image.

For the background image (100% box), I made a 30x30px with an opacity of 30%, then you have to experiment to find the right color and the right opacity.

CSS is then very simple (see the demo application)

Do not use my links to the images directly, as I may delete them from my account!

Demo Application


I will try that today thanks!!

Nice! I have an immediate use for that.




very pretty :+1:

Question - how would I adjust that CSS to move the card title to the top of the container?

I’m using a 3:1 image with the Float card style.

Edit, margin-top: calc(-35% + 1px);
I also changed the Height: 120% to Height: 100vh;

/* Image */
[data-test="app-vertical-list"] .card-image-container img {

/* Zone Bottom area */
[data-test="app-vertical-list"] .bottom-area {
background:transparent !important;
margin-top: calc(-35% + 1px);

I modified my small demo application with this option :slight_smile:


Actually, mine looks much better without the red dots - and they aren’t necessary now.

Thanks for that, was exactly what I needed :+1:

PS. @adriasoce sorry for hijacking your topic :joy:


It works for me too!! Thanks a lot!

1 Like

No worries man, I want to know also what you are trying to do because maybe it will be useful for others or for other projects.

1 Like

I find it pretty with the red dots :rofl:

beware of color blind :thinking:

an additional icon may be welcome

maybe if a user of this forum is color blind, he could give his opinion !!

This is very nice! Thanks for sharing.

1 Like

That’s terrific, @Manu.n!!!

1 Like

Nicely done @Manu.n.

Is this CSS basically taking the card image and making it an underlay to the card?