# Overlay congrats GIF (whole screen)

**URL:** <https://community.glideapps.com/t/overlay-congrats-gif-whole-screen/56418>\
**Category:** Ask for Help\
**Created:** [January 6, 2023, 5:21pm UTC](https://community.glideapps.com/t/overlay-congrats-gif-whole-screen/56418 "2023-01-06T17:21:39Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Martin\_B](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/martin_b/32/74360_2.png) [@Martin\_B](https://community.glideapps.com/u/Martin_B)\
**Post date:** [January 6, 2023, 5:21pm UTC](https://community.glideapps.com/t/overlay-congrats-gif-whole-screen/56418/1 "2023-01-06T17:21:39Z")

</div>

Hello fellow Gliders 🙂

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 😕  
(not even in the code book)

Have a nice day

Martin

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [January 6, 2023, 7:23pm UTC](https://community.glideapps.com/t/overlay-congrats-gif-whole-screen/56418/2 "2023-01-06T19:23:19Z")

</div>

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

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

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

<pre><span><style>
    body{ margin: 0; padding: 0; }
    .snow { width: 100% ;
    height:100% ;
    position: fixed ;
    top:0;
    left:0%;
    opacity: 0.3;
    z-index:1;
    pointer-events: none;
    }
    .snow img { width: 100% ;
    height:100% ;
    object-fit: cover ;
    }

```

---

<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:** [January 6, 2023, 8:11pm UTC](https://community.glideapps.com/t/overlay-congrats-gif-whole-screen/56418/3 "2023-01-06T20:11:04Z")

</div>

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](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/4/643cfa2a6a47981b50f8b4fa145c489a10ac9738.gif)

---

<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:** [January 7, 2023, 12:11am UTC](https://community.glideapps.com/t/overlay-congrats-gif-whole-screen/56418/4 "2023-01-07T00:11:54Z")

</div>

Great trick!

---

<div class="post-metadata">

**Author:** ![Martin\_B](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/martin_b/32/74360_2.png) [@Martin\_B](https://community.glideapps.com/u/Martin_B)\
**Post date:** [January 7, 2023, 3:47pm UTC](https://community.glideapps.com/t/overlay-congrats-gif-whole-screen/56418/5 "2023-01-07T15:47:46Z")

</div>

Thank you guys!

blessed… Three elite team members answering my post 😉 😜

Have a nice day

---

<div class="post-metadata">

**Author:** ![Martin\_B](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/martin_b/32/74360_2.png) [@Martin\_B](https://community.glideapps.com/u/Martin_B)\
**Post date:** [January 7, 2023, 3:51pm UTC](https://community.glideapps.com/t/overlay-congrats-gif-whole-screen/56418/6 "2023-01-07T15:51:37Z")

</div>

And beautiful indeed… @Robert_Petitto

I was looking to have it on the foreground… above all elements… but that will do 🙏  
(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 \>\<

---

<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:** [January 7, 2023, 5:22pm UTC](https://community.glideapps.com/t/overlay-congrats-gif-whole-screen/56418/7 "2023-01-07T17:22:01Z")

</div>

> [@Martin\_B](#):
>
> Its funny to see that by using no code, i know now a bunch of javascript stuff

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

- HTML
- Markdown
- CSS
- Javascript
- REST API
- JSON Transformation
- JQ Query

Craziness.

---

<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:** [January 7, 2023, 11:41pm UTC](https://community.glideapps.com/t/overlay-congrats-gif-whole-screen/56418/8 "2023-01-07T23:41:09Z")

</div>

> [@Martin\_B](#):
>
> Its funny to see that by using no code, i know now a bunch of javascript stuff

Haha, this is basically my experience.