# CSS for only some background cards **URL:** \ **Category:** Ask for Help\ **Created:** [June 27, 2021, 9:15pm UTC](https://community.glideapps.com/t/css-for-only-some-background-cards/28427 "2021-06-27T21:15:19Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![adriasoce](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/adriasoce/32/24153_2.png) [@adriasoce](https://community.glideapps.com/u/adriasoce)\ **Post date:** [June 27, 2021, 9:15pm UTC](https://community.glideapps.com/t/css-for-only-some-background-cards/28427/1 "2021-06-27T21:15:19Z")
Hello! I want to ask you if this thing it’s possible: I have this inline list in a detailed screen: ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/3/b360e07fd3b00bc95c57691bb1534684398195f5.png) And to make it more visual i thought to put some background but only in the cards that have the 100% completed (like the first one): Is there any chance to make a CSS code only for that ones? Thanks! ---
**Author:** ![kyleheney](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/kyleheney/32/41173_2.png) [@kyleheney](https://community.glideapps.com/u/kyleheney)\ **Post date:** [June 27, 2021, 9:58pm UTC](https://community.glideapps.com/t/css-for-only-some-background-cards/28427/2 "2021-06-27T21:58:14Z")
I don’t know the necessary CSS code, but I think the start of it would be to have an IFTHEN column to add an image for the 100% completion. Once you have that, I think you can likely add CSS to make the image fill the card (and it would only fill the ones with an image — the 100% ones). ---
**Author:** ![adriasoce](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/adriasoce/32/24153_2.png) [@adriasoce](https://community.glideapps.com/u/adriasoce)\ **Post date:** [June 27, 2021, 10:05pm UTC](https://community.glideapps.com/t/css-for-only-some-background-cards/28427/3 "2021-06-27T22:05:36Z")
Not that easy because i want the image as background not as image in the card. But i thougjt now that maybe i can add a css to fill all the backgrounds with an ifthenelse column that put into a twmplate a background of some color or a white one. ---
**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\ **Post date:** [June 27, 2021, 11:25pm UTC](https://community.glideapps.com/t/css-for-only-some-background-cards/28427/4 "2021-06-27T23:25:52Z")
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. ---
**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\ **Post date:** [June 28, 2021, 12:08am UTC](https://community.glideapps.com/t/css-for-only-some-background-cards/28427/5 "2021-06-28T00:08:21Z")
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). ---
**Author:** ![kyleheney](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/kyleheney/32/41173_2.png) [@kyleheney](https://community.glideapps.com/u/kyleheney)\ **Post date:** [June 28, 2021, 12:31am UTC](https://community.glideapps.com/t/css-for-only-some-background-cards/28427/6 "2021-06-28T00:31:49Z")
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. ---
**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\ **Post date:** [June 28, 2021, 12:48am UTC](https://community.glideapps.com/t/css-for-only-some-background-cards/28427/7 "2021-06-28T00:48:37Z")
That If then will be card-specific only in the details view. You can’t do that when showing a whole list. ---
**Author:** ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)\ **Post date:** [June 28, 2021, 4:27am UTC](https://community.glideapps.com/t/css-for-only-some-background-cards/28427/8 "2021-06-28T04:27:21Z")
Hello, I made a CSS in this sense. Give me a little time to give you an example. ---
**Author:** ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)\ **Post date:** [June 28, 2021, 5:00am UTC](https://community.glideapps.com/t/css-for-only-some-background-cards/28427/9 "2021-06-28T05:00:20Z")
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! ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/0/80fee9911e7854a5f3b479a5963d9b6dd52f3a89.png) Demo Application > **[Card Img background](https://card-imagefull.glideapp.io/)** ---
**Author:** ![adriasoce](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/adriasoce/32/24153_2.png) [@adriasoce](https://community.glideapps.com/u/adriasoce)\ **Post date:** [June 28, 2021, 5:24am UTC](https://community.glideapps.com/t/css-for-only-some-background-cards/28427/10 "2021-06-28T05:24:36Z")
I will try that today thanks!! ---
**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\ **Post date:** [June 28, 2021, 6:01am UTC](https://community.glideapps.com/t/css-for-only-some-background-cards/28427/11 "2021-06-28T06:01:43Z")
Nice! I have an immediate use for that. ---
**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\ **Post date:** [June 28, 2021, 6:23am UTC](https://community.glideapps.com/t/css-for-only-some-background-cards/28427/12 "2021-06-28T06:23:37Z")
Wonderful!! ![Screen Shot 2021-06-28 at 2.22.36 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/f/5f46026ddbf78f3c5f7e81e76526e7b2702ea215.png) ---
**Author:** ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)\ **Post date:** [June 28, 2021, 6:26am UTC](https://community.glideapps.com/t/css-for-only-some-background-cards/28427/13 "2021-06-28T06:26:44Z")
very pretty 👍 ---
**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\ **Post date:** [June 28, 2021, 6:30am UTC](https://community.glideapps.com/t/css-for-only-some-background-cards/28427/14 "2021-06-28T06:30:14Z")
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. ---
**Author:** ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)\ **Post date:** [June 28, 2021, 6:35am UTC](https://community.glideapps.com/t/css-for-only-some-background-cards/28427/15 "2021-06-28T06:35:28Z")
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 { height:100vh; } /\* Zone Bottom area \*/ [data-test="app-vertical-list"] .bottom-area { background:transparent !important; margin-top: calc(-35% + 1px); z-index:1; } > ``` ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/b/ebfb3633da42112c1fefda6c06db891b7af1f905.png) ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/b/9b92257029fd8dd3747d0fa76a079214a5db95f9.png) I modified my small demo application with this option 🙂 ---
**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\ **Post date:** [June 28, 2021, 6:59am UTC](https://community.glideapps.com/t/css-for-only-some-background-cards/28427/16 "2021-06-28T06:59:03Z")
Actually, mine looks much better without the red dots - and they aren’t necessary now. ![Screen Shot 2021-06-28 at 2.57.10 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/a/ba4ea4f152254e89f046583b3e0338e884b9c795.png) Thanks for that, was exactly what I needed 👍 PS. @adriasoce sorry for hijacking your topic 😂 ---
**Author:** ![adriasoce](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/adriasoce/32/24153_2.png) [@adriasoce](https://community.glideapps.com/u/adriasoce)\ **Post date:** [June 28, 2021, 6:59am UTC](https://community.glideapps.com/t/css-for-only-some-background-cards/28427/17 "2021-06-28T06:59:08Z")
It works for me too!! Thanks a lot! ---
**Author:** ![adriasoce](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/adriasoce/32/24153_2.png) [@adriasoce](https://community.glideapps.com/u/adriasoce)\ **Post date:** [June 28, 2021, 6:59am UTC](https://community.glideapps.com/t/css-for-only-some-background-cards/28427/18 "2021-06-28T06:59:59Z")
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. ---
**Author:** ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)\ **Post date:** [June 28, 2021, 7:03am UTC](https://community.glideapps.com/t/css-for-only-some-background-cards/28427/19 "2021-06-28T07:03:28Z")
I find it pretty with the red dots 🤣 ---
**Author:** ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)\ **Post date:** [June 28, 2021, 7:07am UTC](https://community.glideapps.com/t/css-for-only-some-background-cards/28427/20 "2021-06-28T07:07:30Z")
beware of color blind 🤔 an additional icon may be welcome maybe if a user of this forum is color blind, he could give his opinion !! [Next page](https://community.glideapps.com/t/css-for-only-some-background-cards/28427.md?page=2)