# App background help

**URL:** https://community.glideapps.com/t/app-background-help/75490
**Category:** Ask for Help
**Created:** [August 7, 2024, 12:10pm UTC](https://community.glideapps.com/t/app-background-help/75490 "2024-08-07T12:10:27Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![Keith\_Chikumbirike](https://avatars.discourse-cdn.com/v4/letter/k/5daacb/32.png) [@Keith\_Chikumbirike](https://community.glideapps.com/u/Keith_Chikumbirike)
#### Post date: [August 7, 2024, 12:10pm UTC](https://community.glideapps.com/t/app-background-help/75490/1 "2024-08-07T12:10:27Z")

</div>

Goodday friends…

Kindly help, I found a howe to on this community to create a background for my app and did exactly that.

I have a template column setup with the following text refrenced to a picture for the background (url) ;

```auto
<a style="position: fixed;
width: 100%;
top:0%;
right: 0%; z-index:-1;">
<img src="URL" /></a>

```

Using richtext I have the template column value and the top of the screen.

I’d like the background to not move or scroll with the text. What should I adjust?

---

<div class="post-metadata">

### 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: [August 7, 2024, 1:23pm UTC](https://community.glideapps.com/t/app-background-help/75490/2 "2024-08-07T13:23:03Z")

</div>

> **[CSS Library](https://css-library.glide.page)**

---

<div class="post-metadata">

### 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: [August 7, 2024, 3:50pm UTC](https://community.glideapps.com/t/app-background-help/75490/3 "2024-08-07T15:50:53Z")

</div>

It seems not found in the CSS library, you try the following thread:

> [@Enlarge an image](https://community.glideapps.com/t/enlarge-an-image/63450/5):
>
> If on a paid plan you could use this css to make an image full screen. Set the background of a container with an image. .full-container { height: 100%; }

---

<div class="post-metadata">

### 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: [August 8, 2024, 1:33am UTC](https://community.glideapps.com/t/app-background-help/75490/5 "2024-08-08T01:33:40Z")

</div>

This has been discussed. I couldn’t find the thread. Try adding position: fixed;.

```auto
.full-container {
position: fixed;
height: 100%;
}

```

---

<div class="post-metadata">

### 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: [August 8, 2024, 1:40am UTC](https://community.glideapps.com/t/app-background-help/75490/6 "2024-08-08T01:40:07Z")

</div>

I think the solution that @Himaladin suggested can work but you may need to careful of the background image choice if you plan to use multiple containers. You would want it to appear seamless… I haven’t yet seen a solution that can be used on the screen itself rather than on the containers.

---

<div class="post-metadata">

### 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: [August 8, 2024, 4:40am UTC](https://community.glideapps.com/t/app-background-help/75490/7 "2024-08-08T04:40:53Z")

</div>

I found a way. Here you need to add the class name “backg” in the top component, call it empty component. Then you need to adjust margin-top to pull all the components below it up to the top to overlap your background space.  
Good luck for you.

```auto
.backg {
position: sticky !important;
top:0px;
width:100%;
height: 100vh;
margin-top:-100vh;
background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSkyq5M9l9X5QDHKbR1Pv78y0NTOydF-M9PWg&s');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}

```

---

<div class="post-metadata">

### 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: [August 8, 2024, 4:46am UTC](https://community.glideapps.com/t/app-background-help/75490/8 "2024-08-08T04:46:38Z")

</div>

wonderful! 🥰

---

<div class="post-metadata">

### Author: ![Keith\_Chikumbirike](https://avatars.discourse-cdn.com/v4/letter/k/5daacb/32.png) [@Keith\_Chikumbirike](https://community.glideapps.com/u/Keith_Chikumbirike)
#### Post date: [August 8, 2024, 9:57am UTC](https://community.glideapps.com/t/app-background-help/75490/9 "2024-08-08T09:57:46Z")

</div>

Since I wanted this to be the background even of other containers as follows ;

![Screenshot 2024-08-08 115651](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/6/f6963e8c1628f92ec5e1519b41af0a08ed961bc0.png)

Do I replace the previous code with the new one in a template column as before or is there another I way I should go about it? So far I have tried replacing the code and using richtext component but it didnt work

---

<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: [August 8, 2024, 10:14am UTC](https://community.glideapps.com/t/app-background-help/75490/10 "2024-08-08T10:14:05Z")

</div>

> **[Custom CSS | Glide Docs](https://www.glideapps.com/docs/reference/user-experience/css-for-apps)**
>
> Customize the way your app looks with CSS.

---

<div class="post-metadata">

### 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: [August 8, 2024, 10:30am UTC](https://community.glideapps.com/t/app-background-help/75490/11 "2024-08-08T10:30:43Z")

</div>

I didn’t quite catch what you want.

In the new Glide, you can apply a background to all components within a container, and it will be localized to that container. The code I provided above is for a fixed background that won’t scroll with the screen.  
Additionally, the use of CSS in the new Glide has changed. You can no longer use the rich text component to customize existing components. Customization can be accessed at: Settings \> Appearance \> Custom CSS.

 ![](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/b/cb16c801eb8d573e9cc4094b5043890d232976e9.jpeg)

---

<div class="post-metadata">

### Author: ![Keith\_Chikumbirike](https://avatars.discourse-cdn.com/v4/letter/k/5daacb/32.png) [@Keith\_Chikumbirike](https://community.glideapps.com/u/Keith_Chikumbirike)
#### Post date: [August 8, 2024, 10:46am UTC](https://community.glideapps.com/t/app-background-help/75490/12 "2024-08-08T10:46:51Z")

</div>

In the screenshot below, i actually have a richtext bringing in the wood texture background you see and it works well as other containers are a layer above that background

 ![Screenshot 1](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/3/53a4feeb6db292dec8a4941ad947ccd05e0d4f33.png)

The problem comes when i try to scroll downwards the word texture background disappears, as you can see in the next screenshot below…

I’d want the wood texture background to stay in place regadless of any scrolling done  
 ![Screenshot 2](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/d/dd4e9d8baad3971560e29a4aa994dadcdf66d354.png)

---

<div class="post-metadata">

### 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: [August 8, 2024, 11:08am UTC](https://community.glideapps.com/t/app-background-help/75490/13 "2024-08-08T11:08:00Z")

</div>

Yes. The code I provided is for that purpose. Have you done it?

---

<div class="post-metadata">

### 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: [August 8, 2024, 11:20am UTC](https://community.glideapps.com/t/app-background-help/75490/14 "2024-08-08T11:20:14Z")

</div>

follow the video guide that @Darren_Murphy provided above.

---

<div class="post-metadata">

### Author: ![Keith\_Chikumbirike](https://avatars.discourse-cdn.com/v4/letter/k/5daacb/32.png) [@Keith\_Chikumbirike](https://community.glideapps.com/u/Keith_Chikumbirike)
#### Post date: [August 8, 2024, 11:22am UTC](https://community.glideapps.com/t/app-background-help/75490/15 "2024-08-08T11:22:45Z")

</div>

I have added it to the CSS panel in the appearence settings but to which element to I add the CSS class in the layout section?

---

<div class="post-metadata">

### 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: [August 8, 2024, 11:28am UTC](https://community.glideapps.com/t/app-background-help/75490/16 "2024-08-08T11:28:30Z")

</div>

In your layout, I assume you use a spacer component and place it at the top. In the options section of the component, write “backg” in the CSS class.

Don’t forget to turn off “Use compiled CSS” and turn on “Preview custom CSS” in the custom CSS settings section beforehand.

---

<div class="post-metadata">

### Author: ![Keith\_Chikumbirike](https://avatars.discourse-cdn.com/v4/letter/k/5daacb/32.png) [@Keith\_Chikumbirike](https://community.glideapps.com/u/Keith_Chikumbirike)
#### Post date: [August 8, 2024, 11:40am UTC](https://community.glideapps.com/t/app-background-help/75490/17 "2024-08-08T11:40:01Z")

</div>

Wow, thank you so much, works perfect,  
But now theres just a lot of sapce on top of everything…can it be removed?

---

<div class="post-metadata">

### 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: [August 8, 2024, 11:41am UTC](https://community.glideapps.com/t/app-background-help/75490/18 "2024-08-08T11:41:48Z")

</div>

Show with a screenshot, what space do you mean?

---

<div class="post-metadata">

### Author: ![Keith\_Chikumbirike](https://avatars.discourse-cdn.com/v4/letter/k/5daacb/32.png) [@Keith\_Chikumbirike](https://community.glideapps.com/u/Keith_Chikumbirike)
#### Post date: [August 8, 2024, 11:47am UTC](https://community.glideapps.com/t/app-background-help/75490/19 "2024-08-08T11:47:09Z")

</div>

![Screenshot 3](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/c/accffaa9e551f74fe6df092ba43d70a61b9deff6.png)  
To view content, one will have to scroll up

---

<div class="post-metadata">

### 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: [August 8, 2024, 12:41pm UTC](https://community.glideapps.com/t/app-background-help/75490/21 "2024-08-08T12:41:08Z")

</div>

Has your problem been resolved?  
I think it’s best to just replace margin-top with a -100vh, considering the differences in screen proportions.

---

<div class="post-metadata">

### Author: ![Keith\_Chikumbirike](https://avatars.discourse-cdn.com/v4/letter/k/5daacb/32.png) [@Keith\_Chikumbirike](https://community.glideapps.com/u/Keith_Chikumbirike)
#### Post date: [August 8, 2024, 3:16pm UTC](https://community.glideapps.com/t/app-background-help/75490/22 "2024-08-08T15:16:47Z")

</div>

Thank you so much

[Next page](https://community.glideapps.com/t/app-background-help/75490.md?page=2)
