# Need Help - CSS For background Of Card Based Of Dynamic Data **URL:** \ **Category:** Ask for Help\ **Tags:** custom-css\ **Created:** [October 7, 2024, 9:33pm UTC](https://community.glideapps.com/t/need-help-css-for-background-of-card-based-of-dynamic-data/76896 "2024-10-07T21:33:57Z")\ **Posts on this page:** 9\ **Page:** 1
**Author:** ![Dustinrt](https://avatars.discourse-cdn.com/v4/letter/d/eada6e/32.png) [@Dustinrt](https://community.glideapps.com/u/Dustinrt)\ **Post date:** [October 7, 2024, 9:33pm UTC](https://community.glideapps.com/t/need-help-css-for-background-of-card-based-of-dynamic-data/76896/1 "2024-10-07T21:33:57Z")
![Screen Shot 2024-10-07 at 4.31.30 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/d/bd183bff0fc668b16eb13bf60642d2ddb9502974.png) Trying To Change The Back Ground Of Each Card Based Off Condition In Data Engine Down - Red Engine Okay - Nothing Engine In Maintainance - Yellow How Would I Go About Adding A Css Class To Do This? ---
**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\ **Post date:** [October 7, 2024, 11:00pm UTC](https://community.glideapps.com/t/need-help-css-for-background-of-card-based-of-dynamic-data/76896/2 "2024-10-07T23:00:50Z")
I’m not sure if there is CSS that can dynamically change each card background within a collection but you can use an if-then-else column to display the image you want (red/yellow/etc.) and use CSS to overlay your text similar to what was done here: > [@Transform your card collection into stunning photo galleries 🎞️](https://community.glideapps.com/t/transform-your-card-collection-into-stunning-photo-galleries/73292): > > rocket Check this out, just some simple css can transform your card collection into a nice photo gallery [[Glide Apps - Create interactive photo galleries] ](https://www.youtube.com/watch?v=4zgeF4zu61I) ---
**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:** [October 7, 2024, 11:11pm UTC](https://community.glideapps.com/t/need-help-css-for-background-of-card-based-of-dynamic-data/76896/3 "2024-10-07T23:11:17Z")
The trick here is adding rich text components that contains specific classes, and show/hide them based on your engine status. Then use :has() in your CSS code to style the card based on the rich text component that is currently visible. > **[CSS Library](https://css-library.glide.page/dl/library/s/8836b3/r/cHWeka3sTnCGRzWzqz7g5A)** ---
**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\ **Post date:** [October 7, 2024, 11:53pm UTC](https://community.glideapps.com/t/need-help-css-for-background-of-card-based-of-dynamic-data/76896/4 "2024-10-07T23:53:51Z")
does the rich text component point to a column in your dataset? ---
**Author:** ![Eric\_Penn](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eric_penn/32/73888_2.png) [@Eric\_Penn](https://community.glideapps.com/u/Eric_Penn)\ **Post date:** [October 7, 2024, 11:58pm UTC](https://community.glideapps.com/t/need-help-css-for-background-of-card-based-of-dynamic-data/76896/5 "2024-10-07T23:58:20Z")
Here’s an option without CSS using a custom collection and rich text component. I imagine an ITE column that rules the color and then replace the background color in a template column. > **Click here for code** > > ```auto > > > > > Card Example > > >
>
> Card Image >
>
BASIC INFORMATION
>
Your account information
>
>
>
>
NAME
>
{NAME} >
>
>
>
USERNAME
>
{USERNAME} >
>
>
>
EMAIL
>
{EMAIL} >
>
>
> > > > ``` ![Screenshot 2024-10-07 at 7.55.20 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/b/ab7b3ff1eb55d5b7db03e5ddf11f385487686b87.png) ---
**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\ **Post date:** [October 8, 2024, 12:08am UTC](https://community.glideapps.com/t/need-help-css-for-background-of-card-based-of-dynamic-data/76896/6 "2024-10-08T00:08:54Z")
love the flexibility of this! 🙌 ---
**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\ **Post date:** [October 8, 2024, 2:42am UTC](https://community.glideapps.com/t/need-help-css-for-background-of-card-based-of-dynamic-data/76896/7 "2024-10-08T02:42:25Z")
Haven’t you considered using Kanban? ---
**Author:** ![Trustin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/trustin/32/88217_2.png) [@Trustin](https://community.glideapps.com/u/Trustin)\ **Post date:** [October 8, 2024, 2:47am UTC](https://community.glideapps.com/t/need-help-css-for-background-of-card-based-of-dynamic-data/76896/8 "2024-10-08T02:47:35Z")
I am on a free plan using Rich Text and CSS. This is the output ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/5/4578170385eb529f295cf54e6e2eac5d883e2b82.jpeg) Using a custom collection component to read my wallpaper data. ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/3/d3b4423eded065ccc19002f2f02b0c8f927f3622.png) Data columns with boolean and if else to check for conditions. ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/2/f2c92fce308b315959baea6ea2a5a3ffc44d9b6d.png)l And template column to contain the CSS ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/4/64064cc369bef750ef67645b059466170225ffc0.png) **The html code with inline style** ```auto
🔥 ROAST
``` ---
**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\ **Post date:** [October 8, 2024, 5:59am UTC](https://community.glideapps.com/t/need-help-css-for-background-of-card-based-of-dynamic-data/76896/9 "2024-10-08T05:59:48Z")
nice! Are you happy with the result? If you want to tweak the appearance, just let us know.