# Create Background with CSS

**URL:** <https://community.glideapps.com/t/create-background-with-css/16403>\
**Category:** Ask for Help\
**Created:** [September 26, 2020, 7:21pm UTC](https://community.glideapps.com/t/create-background-with-css/16403 "2020-09-26T19:21:57Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![Jen\_NYCP](https://avatars.discourse-cdn.com/v4/letter/j/848f3c/32.png) [@Jen\_NYCP](https://community.glideapps.com/u/Jen_NYCP)\
**Post date:** [October 6, 2020, 9:24pm UTC](https://community.glideapps.com/t/create-background-with-css/16403/21 "2020-10-06T21:24:38Z")

</div>

Hi Lucas,

Does this only work for inline list components or image components as well?

I added this code to the of a tab with an image component and it’s not popping up. There are some text components in between this CSS text block and the image component. Does the CSS have to be right on top of the image component?

Thanks!

---

<div class="post-metadata">

**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\
**Post date:** [October 6, 2020, 9:29pm UTC](https://community.glideapps.com/t/create-background-with-css/16403/22 "2020-10-06T21:29:01Z")

</div>

> [@Jen\_NYCP](#):
>
> Does this only work for inline list components or image components as well?

This works only in Rich Text component

---

<div class="post-metadata">

**Author:** ![Jen\_NYCP](https://avatars.discourse-cdn.com/v4/letter/j/848f3c/32.png) [@Jen\_NYCP](https://community.glideapps.com/u/Jen_NYCP)\
**Post date:** [October 6, 2020, 9:29pm UTC](https://community.glideapps.com/t/create-background-with-css/16403/23 "2020-10-06T21:29:21Z")

</div>

Yes, the CSS is in a rich text component. The example above was for the background to show up behind an inline list component. What I am trying to do now is for a simple image component.

---

<div class="post-metadata">

**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\
**Post date:** [October 6, 2020, 9:30pm UTC](https://community.glideapps.com/t/create-background-with-css/16403/24 "2020-10-06T21:30:56Z")

</div>

ok, but you said you added as a imagem component… its not correct

you gotta add in a template column, replace the image column and pick the code as a rich text

---

<div class="post-metadata">

**Author:** ![Jen\_NYCP](https://avatars.discourse-cdn.com/v4/letter/j/848f3c/32.png) [@Jen\_NYCP](https://community.glideapps.com/u/Jen_NYCP)\
**Post date:** [October 7, 2020, 1:11pm UTC](https://community.glideapps.com/t/create-background-with-css/16403/25 "2020-10-07T13:11:52Z")

</div>

The code is in a template column, its set up the same way in both examples. Here are some screenshots. The first image (in-line component) the background is displaying, the second it isn’t (image component)

 ![ex1](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/a/af5f334bcfd85f72e5b800110f8773b336f557ef.png)  
 ![ex2](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/f/ff6ad8563c836cddcbf6e162def1b2677c4b9f5d.jpeg)

---

<div class="post-metadata">

**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\
**Post date:** [October 7, 2020, 2:45pm UTC](https://community.glideapps.com/t/create-background-with-css/16403/26 "2020-10-07T14:45:42Z")

</div>

Only works in rich text man…

---

<div class="post-metadata">

**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, 2020, 2:51pm UTC](https://community.glideapps.com/t/create-background-with-css/16403/27 "2020-10-07T14:51:11Z")

</div>

Imagine you’re injecting an external thing to Glide that Glide hasn’t supported yet. It has to be rich text. Image is a “native” component and you have to follow its standard.

---

<div class="post-metadata">

**Author:** ![Jen\_NYCP](https://avatars.discourse-cdn.com/v4/letter/j/848f3c/32.png) [@Jen\_NYCP](https://community.glideapps.com/u/Jen_NYCP)\
**Post date:** [October 8, 2020, 2:12pm UTC](https://community.glideapps.com/t/create-background-with-css/16403/28 "2020-10-08T14:12:29Z")

</div>

Is the first component, which has the CSS code template, not Rich Text?

---

<div class="post-metadata">

**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 8, 2020, 2:46pm UTC](https://community.glideapps.com/t/create-background-with-css/16403/29 "2020-10-08T14:46:30Z")

</div>

So you mean you have both rich texts in two screens but one works and the other one doesn’t?

---

<div class="post-metadata">

**Author:** ![Jen\_NYCP](https://avatars.discourse-cdn.com/v4/letter/j/848f3c/32.png) [@Jen\_NYCP](https://community.glideapps.com/u/Jen_NYCP)\
**Post date:** [October 9, 2020, 4:13pm UTC](https://community.glideapps.com/t/create-background-with-css/16403/30 "2020-10-09T16:13:42Z")

</div>

Yes!

---

<div class="post-metadata">

**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 9, 2020, 4:16pm UTC](https://community.glideapps.com/t/create-background-with-css/16403/31 "2020-10-09T16:16:33Z")

</div>

I see you naming the two columns differently. “TEMP-CSS” and “TEMPLATE-CSS”. Any chance the codes in there are different?

---

<div class="post-metadata">

**Author:** ![Jen\_NYCP](https://avatars.discourse-cdn.com/v4/letter/j/848f3c/32.png) [@Jen\_NYCP](https://community.glideapps.com/u/Jen_NYCP)\
**Post date:** [October 11, 2020, 5:44am UTC](https://community.glideapps.com/t/create-background-with-css/16403/32 "2020-10-11T05:44:37Z")

</div>

Copied and pasted. Exact same code.

---

<div class="post-metadata">

**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 11, 2020, 9:08am UTC](https://community.glideapps.com/t/create-background-with-css/16403/33 "2020-10-11T09:08:57Z")

</div>

My best bet is the code actually works with the class presented on the first screen, the second screen presents another class that the code has yet got access to.

---

<div class="post-metadata">

**Author:** ![Jen\_NYCP](https://avatars.discourse-cdn.com/v4/letter/j/848f3c/32.png) [@Jen\_NYCP](https://community.glideapps.com/u/Jen_NYCP)\
**Post date:** [October 11, 2020, 10:04pm UTC](https://community.glideapps.com/t/create-background-with-css/16403/34 "2020-10-11T22:04:13Z")

</div>

Yes, that’s what I was thinking initially. An image component being the next block and not an inline component, where the code works.

---

<div class="post-metadata">

**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:** [October 11, 2020, 10:54pm UTC](https://community.glideapps.com/t/create-background-with-css/16403/35 "2020-10-11T22:54:20Z")

</div>

Yes. CSS that works for inline list won’t work for image. You need to call the correct class

---

<div class="post-metadata">

**Author:** ![Jen\_NYCP](https://avatars.discourse-cdn.com/v4/letter/j/848f3c/32.png) [@Jen\_NYCP](https://community.glideapps.com/u/Jen_NYCP)\
**Post date:** [October 12, 2020, 6:59pm UTC](https://community.glideapps.com/t/create-background-with-css/16403/36 "2020-10-12T18:59:53Z")

</div>

How do you do that? I don’t see anything naming a class in the code.

---

<div class="post-metadata">

**Author:** ![Jen\_NYCP](https://avatars.discourse-cdn.com/v4/letter/j/848f3c/32.png) [@Jen\_NYCP](https://community.glideapps.com/u/Jen_NYCP)\
**Post date:** [October 18, 2020, 5:45pm UTC](https://community.glideapps.com/t/create-background-with-css/16403/37 "2020-10-18T17:45:49Z")

</div>

Does anyone know which class I need to make this happen? Thanks!

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [October 18, 2020, 6:12pm UTC](https://community.glideapps.com/t/create-background-with-css/16403/38 "2020-10-18T18:12:03Z")

</div>

You need to view/inspect the page source, find the code for the specific component and see what CSS class name it is using. These are usually pretty cryptic and take some trial and error to find the correct class to modify with added CSS code.

---

<div class="post-metadata">

**Author:** ![Jen\_NYCP](https://avatars.discourse-cdn.com/v4/letter/j/848f3c/32.png) [@Jen\_NYCP](https://community.glideapps.com/u/Jen_NYCP)\
**Post date:** [October 18, 2020, 10:57pm UTC](https://community.glideapps.com/t/create-background-with-css/16403/39 "2020-10-18T22:57:48Z")

</div>

Yes, there is quite a few grouped together when hovering over the same space. I will take a look. Thanks!

---

<div class="post-metadata">

**Author:** ![yosefdc7](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/yosefdc7/32/20850_2.png) [@yosefdc7](https://community.glideapps.com/u/yosefdc7)\
**Post date:** [February 2, 2021, 2:34am UTC](https://community.glideapps.com/t/create-background-with-css/16403/40 "2021-02-02T02:34:57Z")

</div>

this thread is a gem!  
thanks guys

btw I am seeking to change the background color of my topbar, how do I change it to an image ?

[Previous page](https://community.glideapps.com/t/create-background-with-css/16403.md?page=1)

[Next page](https://community.glideapps.com/t/create-background-with-css/16403.md?page=3)
