How to add images to the full screen background

Ask for Help
1

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

Is it possible to to add inline list above this?

2

Glide Apps or Pages?

3

Glide apps

4

This is what I use in a Rich Text component:

CleanShot 2022-03-22 at 22.22.19@2x
CleanShot 2022-03-22 at 22.22.19@2x1336×1308 101 KB 

<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; 
}
8 Likes
5

We need that for Pages as well

6

Does this work on the free plan?
I don’t see a image in the background of the rich text…

7

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

8

Thank you! I saw a picture on Classic App.

9

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

10

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?

11

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

3 Likes