# Static Overlay Images

**URL:** <https://community.glideapps.com/t/static-overlay-images/11084>\
**Category:** Feature Requests\
**Created:** [June 18, 2020, 3:56pm UTC](https://community.glideapps.com/t/static-overlay-images/11084 "2020-06-18T15:56:10Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![JWhiteside](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jwhiteside/32/510_2.png) [@JWhiteside](https://community.glideapps.com/u/JWhiteside)\
**Post date:** [June 18, 2020, 3:56pm UTC](https://community.glideapps.com/t/static-overlay-images/11084/1 "2020-06-18T15:56:10Z")

</div>

It would be great to have a static overlay image functionality. The use case would be that you could keep the title/logo/image that is your header on the main page of an app always visible even when someone is scrolling down the page.

---

<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:** [June 18, 2020, 5:36pm UTC](https://community.glideapps.com/t/static-overlay-images/11084/2 "2020-06-18T17:36:10Z")

</div>

So “sticky” headers?

> [@Enable "sticky" images as headers](https://community.glideapps.com/t/enable-sticky-images-as-headers/6881):
>
> It would be great to allow images to be “stickied” in place so they could be used as page headers. See image below — there is a list under the image and as soon as I started to scroll through the list, I felt like the image at the top should have stayed there to enhance the visual look and feel of the page.

---

<div class="post-metadata">

**Author:** ![JWhiteside](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jwhiteside/32/510_2.png) [@JWhiteside](https://community.glideapps.com/u/JWhiteside)\
**Post date:** [June 18, 2020, 9:21pm UTC](https://community.glideapps.com/t/static-overlay-images/11084/3 "2020-06-18T21:21:44Z")

</div>

Yeah exactly. Would be very helpful.

---

<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:** [June 20, 2020, 9:11am UTC](https://community.glideapps.com/t/static-overlay-images/11084/4 "2020-06-20T09:11:00Z")

</div>

Another suggestion is to use a 3:1 tile as a header 👌🏼

> [@Add Videos in Tiles, Cards, and Titles](https://community.glideapps.com/t/add-videos-in-tiles-cards-and-titles/10723/5):
>
> I’d suggest this also ok_hand I also use this in inline lists like a header using Detail screen, take a look! Seems awesome [Untitled\_ Jun 12, 2020 5\_20 PM]

---

<div class="post-metadata">

**Author:** ![JWhiteside](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jwhiteside/32/510_2.png) [@JWhiteside](https://community.glideapps.com/u/JWhiteside)\
**Post date:** [June 22, 2020, 2:07pm UTC](https://community.glideapps.com/t/static-overlay-images/11084/5 "2020-06-22T14:07:16Z")

</div>

It doesn’t stay static though…

---

<div class="post-metadata">

**Author:** ![Sandro\_Brito](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sandro_brito/32/552_2.png) [@Sandro\_Brito](https://community.glideapps.com/u/Sandro_Brito)\
**Post date:** [June 22, 2020, 2:50pm UTC](https://community.glideapps.com/t/static-overlay-images/11084/6 "2020-06-22T14:50:05Z")

</div>

[https://randomcocktail.glideapp.io/](https://randomcocktail.glideapp.io/) on the middle tab.  
html and css hack tho… I know how you all feel about it

---

<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:** [June 22, 2020, 2:53pm UTC](https://community.glideapps.com/t/static-overlay-images/11084/7 "2020-06-22T14:53:21Z")

</div>

This is what I was just playing around with! What was the CSS you ended up using?

---

<div class="post-metadata">

**Author:** ![Sandro\_Brito](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sandro_brito/32/552_2.png) [@Sandro\_Brito](https://community.glideapps.com/u/Sandro_Brito)\
**Post date:** [June 22, 2020, 3:06pm UTC](https://community.glideapps.com/t/static-overlay-images/11084/8 "2020-06-22T15:06:19Z")

</div>

Only works on mobile but:

 ![Screenshot 2020-06-22 at 16.05.46](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/7/72f6bfb6e016e15ecc32b561d495962d226e1a9f.png)

---

<div class="post-metadata">

**Author:** ![Sandro\_Brito](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sandro_brito/32/552_2.png) [@Sandro\_Brito](https://community.glideapps.com/u/Sandro_Brito)\
**Post date:** [June 22, 2020, 3:09pm UTC](https://community.glideapps.com/t/static-overlay-images/11084/9 "2020-06-22T15:09:23Z")

</div>

Sorry, for some reason I couldn’t paste the code here

---

<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:** [June 22, 2020, 3:14pm UTC](https://community.glideapps.com/t/static-overlay-images/11084/10 "2020-06-22T15:14:43Z")

</div>

```
<div class="fixedHeader"><img src="https://1h3.googleusercontent.com/EGNmrWl 83mw-Kv2QFPq9uRKer8- yTdzh8ftMU_abij4igFs7LR9aD_ogY9z6vo6uNLrDsjJ WN3Ngk jX11sg=w3584-h1972" style="width:100%"/><style> .fixedHeader{ position:fixed; top:86px; left:0; z-index:100;{ [id*="screenScrollView"]{padding-top:295px;}</style> </div>
```

---

<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:** [June 22, 2020, 8:24pm UTC](https://community.glideapps.com/t/static-overlay-images/11084/11 "2020-06-22T20:24:47Z")

</div>

Yes cause everything you add in your screen won’t be static. Unless you use code for this, as the guys here up helped you with it. I just gave you another suggestion not a solution 😉

---

<div class="post-metadata">

**Author:** ![JWhiteside](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jwhiteside/32/510_2.png) [@JWhiteside](https://community.glideapps.com/u/JWhiteside)\
**Post date:** [June 22, 2020, 8:54pm UTC](https://community.glideapps.com/t/static-overlay-images/11084/12 "2020-06-22T20:54:15Z")

</div>

Understood, thanks!

---

<div class="post-metadata">

**Author:** ![JWhiteside](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jwhiteside/32/510_2.png) [@JWhiteside](https://community.glideapps.com/u/JWhiteside)\
**Post date:** [June 23, 2020, 12:09pm UTC](https://community.glideapps.com/t/static-overlay-images/11084/13 "2020-06-23T12:09:08Z")

</div>

So just insert image URL of my choosing and place the element in its proper position within the structure of my page? Will this work if I place GIFs inside of it?

Jesse Whiteside, CIM

---

<div class="post-metadata">

**Author:** ![JWhiteside](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jwhiteside/32/510_2.png) [@JWhiteside](https://community.glideapps.com/u/JWhiteside)\
**Post date:** [June 25, 2020, 12:28am UTC](https://community.glideapps.com/t/static-overlay-images/11084/14 "2020-06-25T00:28:45Z")

</div>

Tried inputting my own image and it didn’t work unfortunately.

What am I doing wrong?

Jesse Whiteside, CIM

---

<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:** [June 25, 2020, 12:30am UTC](https://community.glideapps.com/t/static-overlay-images/11084/15 "2020-06-25T00:30:42Z")

</div>

I was just copying the code from Sandro for you to copy it more easily, so take my input with a pinch of salt because I haven’t tried this as well.

Any chance you’re testing it from a desktop instead of your phone? When I tried a background trick using HTML a while ago it did not work with my desktop but did with my iPhone.

---

<div class="post-metadata">

**Author:** ![JWhiteside](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jwhiteside/32/510_2.png) [@JWhiteside](https://community.glideapps.com/u/JWhiteside)\
**Post date:** [July 20, 2020, 11:10pm UTC](https://community.glideapps.com/t/static-overlay-images/11084/16 "2020-07-20T23:10:49Z")

</div>

Interesting, I will give that a go when I have some time. thanks!

---

<div class="post-metadata">

**Author:** ![Alexdz](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/alexdz/32/10382_2.png) [@Alexdz](https://community.glideapps.com/u/Alexdz)\
**Post date:** [July 21, 2020, 12:31am UTC](https://community.glideapps.com/t/static-overlay-images/11084/17 "2020-07-21T00:31:17Z")

</div>

Where do you add the CSS? in the rich text component?

---

<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:** [July 21, 2020, 12:37am UTC](https://community.glideapps.com/t/static-overlay-images/11084/18 "2020-07-21T00:37:14Z")

</div>

Yes that’s right.