# How to add images to the full screen background

**URL:** https://community.glideapps.com/t/how-to-add-images-to-the-full-screen-background/39964
**Category:** Ask for Help
**Created:** [March 22, 2022, 5:56pm UTC](https://community.glideapps.com/t/how-to-add-images-to-the-full-screen-background/39964 "2022-03-22T17:56:20Z")
**Posts on this page:** 11
**Page:** 1

<div class="post-metadata">

### Author: ![Manikandan\_R](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manikandan_r/32/43482_2.png) [@Manikandan\_R](https://community.glideapps.com/u/Manikandan_R)
#### Post date: [March 22, 2022, 5:56pm UTC](https://community.glideapps.com/t/how-to-add-images-to-the-full-screen-background/39964/1 "2022-03-22T17:56:20Z")

</div>

How to add full screen images or colour to the screen.

Is it possible to to add inline list above this?

---

<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: [March 22, 2022, 8:11pm UTC](https://community.glideapps.com/t/how-to-add-images-to-the-full-screen-background/39964/2 "2022-03-22T20:11:18Z")

</div>

Glide Apps or Pages?

---

<div class="post-metadata">

### Author: ![Manikandan\_R](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manikandan_r/32/43482_2.png) [@Manikandan\_R](https://community.glideapps.com/u/Manikandan_R)
#### Post date: [March 23, 2022, 1:38am UTC](https://community.glideapps.com/t/how-to-add-images-to-the-full-screen-background/39964/3 "2022-03-23T01:38:00Z")

</div>

Glide apps

---

<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: [March 23, 2022, 2:22am UTC](https://community.glideapps.com/t/how-to-add-images-to-the-full-screen-background/39964/4 "2022-03-23T02:22:54Z")

</div>

This is what I use in a Rich Text component:

 ![CleanShot 2022-03-22 at 22.22.19@2x](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/6/d600a10575ffb454aac60dc4b3c1c3b8c60a490d.jpeg)

```auto
<div class="background"></div>

<pre><span><style>

.background {
position: fixed;
margin-top:0;
width: 100%;
height:100%;
top:0;
right:0; 
left: 0%;
z-index:-100;
background-image: url("https://res.cloudinary.com/glide/image/fetch/e_tint:70:facc13/https://storage.googleapis.com/glide-prod.appspot.com/uploads-v2/oqLizoQmUcR1CCO0jFaD/pub/pctlOVykw1BAAdyGIUOt.jpeg"); 
background-size: cover;
background-position: center center;
}

[data-test="glide-app-bar"] :nth-child(1) {
backdrop-filter: blur(0px) !important;
background: transparent !important; 
-webkit-backdrop-filter: blur(0px) !important;
}

#app-root div[opacity='1'] {
  color: transparent; 
}

```

---

<div class="post-metadata">

### Author: ![Vitor\_Guimaraes](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/vitor_guimaraes/32/39703_2.png) [@Vitor\_Guimaraes](https://community.glideapps.com/u/Vitor_Guimaraes)
#### Post date: [July 11, 2023, 3:33pm UTC](https://community.glideapps.com/t/how-to-add-images-to-the-full-screen-background/39964/5 "2023-07-11T15:33:35Z")

</div>

We need that for Pages as well

---

<div class="post-metadata">

### Author: ![serg\_sws](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/serg_sws/32/63017_2.png) [@serg\_sws](https://community.glideapps.com/u/serg_sws)
#### Post date: [September 6, 2023, 9:46am UTC](https://community.glideapps.com/t/how-to-add-images-to-the-full-screen-background/39964/6 "2023-09-06T09:46:28Z")

</div>

Does this work on the free plan?  
I don’t see a image in the background of the 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: [September 7, 2023, 12:23am UTC](https://community.glideapps.com/t/how-to-add-images-to-the-full-screen-background/39964/7 "2023-09-07T00:23:28Z")

</div>

That would only work in Classic Apps (referred to as Glide Apps) above.

---

<div class="post-metadata">

### Author: ![serg\_sws](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/serg_sws/32/63017_2.png) [@serg\_sws](https://community.glideapps.com/u/serg_sws)
#### Post date: [September 7, 2023, 6:00am UTC](https://community.glideapps.com/t/how-to-add-images-to-the-full-screen-background/39964/8 "2023-09-07T06:00:05Z")

</div>

Thank you! I saw a picture on Classic App.

---

<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: [September 8, 2023, 1:02am UTC](https://community.glideapps.com/t/how-to-add-images-to-the-full-screen-background/39964/9 "2023-09-08T01:02:59Z")

</div>

Yeah, just to clarify again, this most likely won’t work on the current product (the new Glide Apps, previously Glide Pages).

---

<div class="post-metadata">

### Author: ![nathanaelb](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nathanaelb/32/43079_2.png) [@nathanaelb](https://community.glideapps.com/u/nathanaelb)
#### Post date: [September 8, 2023, 10:55pm UTC](https://community.glideapps.com/t/how-to-add-images-to-the-full-screen-background/39964/10 "2023-09-08T22:55:40Z")

</div>

I don’t know if you could achieve exactly what you want, but have you tried using a container as the top component of the tab, putting all subsequent components of the tab inside that container, and setting an image as the background for the container?

---

<div class="post-metadata">

### Author: ![serg\_sws](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/serg_sws/32/63017_2.png) [@serg\_sws](https://community.glideapps.com/u/serg_sws)
#### Post date: [September 9, 2023, 10:59am UTC](https://community.glideapps.com/t/how-to-add-images-to-the-full-screen-background/39964/11 "2023-09-09T10:59:59Z")

</div>

Container does not give full screen display.  
It also works differently on mobile and desktop previews.