# Any way to do this with CSS?

**URL:** <https://community.glideapps.com/t/any-way-to-do-this-with-css/33288>\
**Category:** Ask for Help\
**Created:** [October 19, 2021, 2:51pm UTC](https://community.glideapps.com/t/any-way-to-do-this-with-css/33288 "2021-10-19T14:51:20Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jorge\_Hernandez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jorge_hernandez/32/25768_2.png) [@Jorge\_Hernandez](https://community.glideapps.com/u/Jorge_Hernandez)\
**Post date:** [October 19, 2021, 2:51pm UTC](https://community.glideapps.com/t/any-way-to-do-this-with-css/33288/1 "2021-10-19T14:51:20Z")

</div>

I want to put an image behind and on top of it a “title” with the logo of a local. It can?

 ![Screenshot_2021.10.19_11.51.03.348](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/6/f68bb1f42aebf5ff103978e30d06f3774cbce0d4.png)

---

<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:** [October 19, 2021, 11:55pm UTC](https://community.glideapps.com/t/any-way-to-do-this-with-css/33288/2 "2021-10-19T23:55:48Z")

</div>

I don’t think this was covered in our Notion, but @Lucas_Pires has this set up like a year ago 😉 He may help you.

---

<div class="post-metadata">

**Author:** ![Jorge\_Hernandez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jorge_hernandez/32/25768_2.png) [@Jorge\_Hernandez](https://community.glideapps.com/u/Jorge_Hernandez)\
**Post date:** [October 20, 2021, 1:16am UTC](https://community.glideapps.com/t/any-way-to-do-this-with-css/33288/3 "2021-10-20T01:16:33Z")

</div>

@Lucas_Pires ! Could you help me?

---

<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:** [October 20, 2021, 2:43am UTC](https://community.glideapps.com/t/any-way-to-do-this-with-css/33288/4 "2021-10-20T02:43:10Z")

</div>

When I sit in my pc tomorrow morning I send to you!

---

<div class="post-metadata">

**Author:** ![Jorge\_Hernandez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jorge_hernandez/32/25768_2.png) [@Jorge\_Hernandez](https://community.glideapps.com/u/Jorge_Hernandez)\
**Post date:** [October 20, 2021, 2:26pm UTC](https://community.glideapps.com/t/any-way-to-do-this-with-css/33288/5 "2021-10-20T14:26:44Z")

</div>

Thank you! I hope for that friend

---

<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:** [October 20, 2021, 2:54pm UTC](https://community.glideapps.com/t/any-way-to-do-this-with-css/33288/6 "2021-10-20T14:54:35Z")

</div>

Asking @Serpa because I guess he has this one easy-get than me 😁

---

<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:** [October 20, 2021, 9:20pm UTC](https://community.glideapps.com/t/any-way-to-do-this-with-css/33288/7 "2021-10-20T21:20:43Z")

</div>

@Jorge_Hernandez Here it is:

1. Create a template column and paste the CSS below

> **CSS Code**
>
> ```auto
> </div></div></div>
> <div style="background-image: url(COVER-IMAGE-URL);
> -moz-border-radius: 50%;
> -webkit-border-radius: 0%;
> width:120%;
> height:200px;
> background-attachment:scroll;
> background-size: cover;
> background-position: center center;
> position: relative;
> z-index:1;
> opacity:1;
> transform:translate(-50%,-55%);
> left:50%;
> margin-top: 12px; border: 3px solid #c3c3c3; background-color:red;"></div>
> 
> <div style="background-image: url(IMAGE-URL); 
> -moz-border-radius: 50%;
> -webkit-border-radius: 50%;
> top: -200px;
> width:80px; 
> height:80px;
> background-attachment:scroll;
> background-size: cover;
> box-shadow: rgb(0 0 0 / 45%) 0px 2px 4px;
> background-position: center center;
> position: relative; 
> z-index: 1; transform:translate(-50%,245%);
> left:50%; margin-top: -147px; border:4px 
> solid #f3f3f3; background-color:white ;"></div>
> 
> <pre><span><style>
> [data-test="glide-app-bar"] :nth-child(1) {
> backdrop-filter: blur(0px);
> background: transparent; 
> -webkit-backdrop-filter: blur(0px);
> }
> 
> #app-root [opacity='1'] {
> color: transparent;
> }
> 
> [data-test="nav-bar"] >div +* {
> color: transparent !important; 
> }
> 
> ```

1. Replace `COVER-IMAGE-URL` and `IMAGE-URL` for the Cover and Image you wanna add respectively.
2. **⚠ Important:** Add a _Rich text_ component **at first** in your screen ( **above all components!** )

**Result**

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/d/fdfa8a81c4af1b3ed976dda6b21fa6dd979a39f8.jpeg)

* * *

- **Doc in Notion with the CSS 👇🏼**

> **[Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.](https://glidecommunity.notion.site/Cover-Image-Rounded-bd4afe6adbed4850955d1abaf8ecaed8?v=1)**
>
> A new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your team

_Powered by @Serpa_

---

<div class="post-metadata">

**Author:** ![Jorge\_Hernandez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jorge_hernandez/32/25768_2.png) [@Jorge\_Hernandez](https://community.glideapps.com/u/Jorge_Hernandez)\
**Post date:** [October 20, 2021, 9:22pm UTC](https://community.glideapps.com/t/any-way-to-do-this-with-css/33288/8 "2021-10-20T21:22:03Z")

</div>

Oh man. This is beautiful. I thank you in my soul, Lucas. All the best!

---

<div class="post-metadata">

**Author:** ![kabookie](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/kabookie/32/10994_2.png) [@kabookie](https://community.glideapps.com/u/kabookie)\
**Post date:** [October 20, 2021, 9:56pm UTC](https://community.glideapps.com/t/any-way-to-do-this-with-css/33288/9 "2021-10-20T21:56:10Z")

</div>

Is there an easy way to capture the url for an image that has been entered on a Glide table? I can view and copy the image urls for those on a Google sheet, but I always save images in Glide tables now that we can, and this would make it much easier to use the CSS above. In the table I can only view the actual image, not the url. Thanks!

---

<div class="post-metadata">

**Author:** ![Jorge\_Hernandez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jorge_hernandez/32/25768_2.png) [@Jorge\_Hernandez](https://community.glideapps.com/u/Jorge_Hernandez)\
**Post date:** [October 20, 2021, 10:00pm UTC](https://community.glideapps.com/t/any-way-to-do-this-with-css/33288/10 "2021-10-20T22:00:54Z")

</div>

![Screenshot_2021.10.20_19.00.44.322](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/5/950267ea8efe40157839465722fdfcb85a451481.jpeg)  
When I scroll the image goes down on my screen as well. Is there a way to correct that?

---

<div class="post-metadata">

**Author:** ![Roldy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/roldy/32/36068_2.png) [@Roldy](https://community.glideapps.com/u/Roldy)\
**Post date:** [October 20, 2021, 10:16pm UTC](https://community.glideapps.com/t/any-way-to-do-this-with-css/33288/11 "2021-10-20T22:16:13Z")

</div>

You can do this simply with a column template

---

<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:** [October 20, 2021, 10:16pm UTC](https://community.glideapps.com/t/any-way-to-do-this-with-css/33288/12 "2021-10-20T22:16:59Z")

</div>

I have updated the code and add one more important step. Plz take a look 👇🏼

> [@Lucas\_Pires](#):
>
> **⚠ Important:** Add a _Rich text_ component **at first** in your screen ( **above all components!** )

---

<div class="post-metadata">

**Author:** ![Jorge\_Hernandez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jorge_hernandez/32/25768_2.png) [@Jorge\_Hernandez](https://community.glideapps.com/u/Jorge_Hernandez)\
**Post date:** [October 20, 2021, 11:22pm UTC](https://community.glideapps.com/t/any-way-to-do-this-with-css/33288/13 "2021-10-20T23:22:36Z")

</div>

Genius! @Lucas_Pires

 ![Screenshot_2021.10.20_20.21.43.030](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/9/29388acf98b8f5f54dac88cacdf302752aee310d.png)

---

<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:** [October 20, 2021, 11:24pm UTC](https://community.glideapps.com/t/any-way-to-do-this-with-css/33288/14 "2021-10-20T23:24:12Z")

</div>

If there are any more magic coming from @Serpa, and if he allows it, please upload it to our Notion 😉 Thanks a lot for the update bro!

---

<div class="post-metadata">

**Author:** ![Jorge\_Hernandez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jorge_hernandez/32/25768_2.png) [@Jorge\_Hernandez](https://community.glideapps.com/u/Jorge_Hernandez)\
**Post date:** [October 20, 2021, 11:26pm UTC](https://community.glideapps.com/t/any-way-to-do-this-with-css/33288/15 "2021-10-20T23:26:20Z")

</div>

I had not seen Mr. @Serpa but this is really magic. Thankful to you, gentlemen!

---

<div class="post-metadata">

**Author:** ![Dilon\_Perera](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/dilon_perera/32/85652_2.png) [@Dilon\_Perera](https://community.glideapps.com/u/Dilon_Perera)\
**Post date:** [October 20, 2021, 11:43pm UTC](https://community.glideapps.com/t/any-way-to-do-this-with-css/33288/16 "2021-10-20T23:43:34Z")

</div>

Oh wow Lucas 🤩

You are superb 👊

---

<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:** [October 20, 2021, 11:45pm UTC](https://community.glideapps.com/t/any-way-to-do-this-with-css/33288/17 "2021-10-20T23:45:43Z")

</div>

Always there’s magic coming from @Serpa and @Pedroydzito for sure!

---

<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:** [October 21, 2021, 4:24am UTC](https://community.glideapps.com/t/any-way-to-do-this-with-css/33288/18 "2021-10-21T04:24:40Z")

</div>

@kabookie a lil trick is click on the image cell in glide tables and do the command to copy (Ctrl/Cmd+C), when you paste it, you’ll see the link there 😉

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [October 21, 2021, 4:31am UTC](https://community.glideapps.com/t/any-way-to-do-this-with-css/33288/19 "2021-10-21T04:31:00Z")

</div>

> [@Best practices pls for image sharing & storage from anywhere in app](https://community.glideapps.com/t/best-practices-pls-for-image-sharing-storage-from-anywhere-in-app/33145/8):
>
> An image column will show the rendered image, but it’s still just a url underneath. The database doesn’t store images. It just stores the location of those images. If you switch that column to a text column, you will see only the url. If you use that image column value in a template column for example, it’s still a url and will show you the url.

---

<div class="post-metadata">

**Author:** ![L.M](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/l.m/32/46371_2.png) [@L.M](https://community.glideapps.com/u/L.M)\
**Post date:** [October 21, 2021, 5:36am UTC](https://community.glideapps.com/t/any-way-to-do-this-with-css/33288/20 "2021-10-21T05:36:40Z")

</div>

Great 👌Is it possible to “make” that forefront image clickable? (I prefer when anything in UI is useful) I mean by say adding an invisible button right there that could edit Profile/trigger Sign in/Navigate to help/home screen?  
And maybe use a template col to catch the current user’s Profile pic to condition the url in the CSS?

Thks Lucas.  
And BTW, welcome to my LinkedIn! You found me! Cool surprise 🌸

[Next page](https://community.glideapps.com/t/any-way-to-do-this-with-css/33288.md?page=2)