# 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:** 9\
**Page:** 3

<div class="post-metadata">

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

</div>

enjoy!

> **[Code BOOK](https://code-book.glideapp.io/dl/ewAiAHQAIgA6ADEALAAiAHMAIgA6ACIAYwBsAGEAcwBzAC0AYwBvAGQAZQBzACIALAAiAHIAIgA6ACIAQwA5ADEASgBiAG0AVABHAFEARQBpAEQASwBEAFEAeABtAFEAWQBUAFgAdwAiACwAIgBuACIAOgAiAEMAUwBTACAAYwBvAGQAZQAiAH0A)**
>
> share cool codes, scripts and links

---

<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:47am UTC](https://community.glideapps.com/t/create-background-with-css/16403/42 "2021-02-02T02:47:49Z")

</div>

Hi @Uzo thanks for the app  
the one in there is for the entire background, can I get the css code for changing the topbar background or topbar color?

---

<div class="post-metadata">

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

</div>

i did not found any like that

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [February 2, 2021, 8:52am UTC](https://community.glideapps.com/t/create-background-with-css/16403/44 "2021-02-02T08:52:35Z")

</div>

i updated the list

> **[Code BOOK](https://code-book.glideapp.io/dl/ewAiAHQAIgA6ADEALAAiAHMAIgA6ACIAYwBsAGEAcwBzAC0AYwBvAGQAZQBzACIALAAiAHIAIgA6ACIAVQBGAGIAcwBSAEYAdgBKAFIAQwB1AFcAWABqAFQAUgBwAHMAaABwAFEAUQAiACwAIgBuACIAOgAiAEMAUwBTACAAYwBvAGQAZQAiAH0A)**
>
> share cool codes, scripts and links

---

<div class="post-metadata">

**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:** [February 2, 2021, 10:29am UTC](https://community.glideapps.com/t/create-background-with-css/16403/45 "2021-02-02T10:29:04Z")

</div>

> [@yosefdc7](#):
>
> btw I am seeking to change the background color of my topbar, how do I change it to an image ?

Here is some CSS that I’ve used to put a progress bar at the top of the screen:

```auto
<!-- Progress Bar -->
<pre><span><style>
	#app-root div[opacity='1'] {
	content: ""; 
	color: transparent; 
	display: block;
	height: 45px;
	background-image: url("IMAGE_URL");
	background-size: 260px 20px;
	background-repeat: no-repeat;
	background-position: 55% 45%;
}

```

Replace IMAGE\_URL with a pointer to the image you want to use.  
You may need to fiddle with it a bit for your specific use case.

---

<div class="post-metadata">

**Author:** ![Shilpi\_Sarkar](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/shilpi_sarkar/32/36080_2.png) [@Shilpi\_Sarkar](https://community.glideapps.com/u/Shilpi_Sarkar)\
**Post date:** [November 15, 2022, 12:03pm UTC](https://community.glideapps.com/t/create-background-with-css/16403/46 "2022-11-15T12:03:02Z")

</div>

Hey lucas, is there any way by which I can set a GIF as a backgroud?

---

<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:** [November 15, 2022, 7:01pm UTC](https://community.glideapps.com/t/create-background-with-css/16403/47 "2022-11-15T19:01:07Z")

</div>

I guess GIF works with image source in the css code

---

<div class="post-metadata">

**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:** [March 28, 2024, 7:00am UTC](https://community.glideapps.com/t/create-background-with-css/16403/48 "2024-03-28T07:00:47Z")

</div>

digging out old threads related to CSS.  
What are your thoughts on using CSS style in Rich Text components?

---

<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:** [March 28, 2024, 11:23pm UTC](https://community.glideapps.com/t/create-background-with-css/16403/49 "2024-03-28T23:23:20Z")

</div>

You can’t do it with the new Glide Pages, only inline styling with HTML is supported.

However, CSS is available on all paid plans with the latest pricing, so you should be able to do much more now, with stable class names.

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