Static Overlay Images

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.

1 Like

So “sticky” headers?

Yeah exactly. Would be very helpful.

Another suggestion is to use a 3:1 tile as a header :ok_hand:t3:

1 Like

It doesn’t stay static though…

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

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

Only works on mobile but:

2 Likes

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

<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>
2 Likes

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 :wink:

Understood, thanks!

1 Like

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

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

What am I doing wrong?

Jesse Whiteside, CIM

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.

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

1 Like

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

Yes that’s right.