Overlay congrats GIF (whole screen)

Hello fellow Gliders :slight_smile:

Anyone managed to overlay an image with transparent background?

I would like a "congratulations " gif, with confetti falling … filling the whole screen.

I didn’t find the code to do it :confused:
(not even in the code book)

Have a nice day


1 Like

there is one in the Code BOOK, check the Holiday Background CSS :wink:
Just replace the image URL with the one you like.

here just paste this… add a timer or off button:

<div class="snow"  target="_blank">
<img src="https://storage.googleapis.com/glide-prod.appspot.com/uploads-v2/9eu1P0fXDpI9SXega1Co/pub/FchC0tKtCj8zaqyKbas4.gif">

    body{ margin: 0; padding: 0; }
    .snow { width: 100% ;
    height:100% ;
    position: fixed ;
    opacity: 0.3;
    pointer-events: none;
    .snow img { width: 100% ;
    height:100% ;
    object-fit: cover ;

In Glide Pages, I create an if-then-else column that outputs either a white background or a confetti background based on whether the congrats should display. Then, I add the if-then-else image as a background to an image container. Not exactly what you’re looking for, but it has a nice effect.
CleanShot 2023-01-06 at 15.08.53


Great trick!

1 Like

Thank you guys!

blessed… Three elite team members answering my post :wink: :stuck_out_tongue_winking_eye:

Have a nice day

And beautiful indeed… @Robert_Petitto

I was looking to have it on the foreground… above all elements… but that will do :pray:
(perfectionism is truly a threat at early stage.)

Its funny to see that by using no code, i know now a bunch of javascript stuff ><

1 Like

You’re not kidding. Learning Glide (a no code tool) advanced my skillset in:

  • HTML
  • Markdown
  • CSS
  • Javascript
  • JSON Transformation
  • JQ Query



Haha, this is basically my experience.

1 Like