Any way to do this with CSS?

Ask for Help
1

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
Screenshot_2021.10.19_11.51.03.348720×1280 181 KB

2

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

2 Likes
3

@Lucas_Pires ! Could you help me?

4

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

2 Likes
5

Thank you! I hope for that friend

6

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

1 Like
7

@Jorge_Hernandez Here it is:

  1. Create a template column and paste the CSS below
CSS Code 
</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. :warning: Important: Add a Rich text component at first in your screen (above all components!)

Result

image

  • Doc in Notion with the CSS :point_down:t3:

Powered by @Serpa

6 Likes
8

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

1 Like
9

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!

10

Screenshot_2021.10.20_19.00.44.322
Screenshot_2021.10.20_19.00.44.322720×1280 208 KB

When I scroll the image goes down on my screen as well. Is there a way to correct that?

11

You can do this simply with a column template

1 Like
12

I have updated the code and add one more important step. Plz take a look :point_down:t3:

3 Likes
13

Genius! @Lucas_Pires

Screenshot_2021.10.20_20.21.43.030
Screenshot_2021.10.20_20.21.43.030720×1280 500 KB

2 Likes
14

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

4 Likes
15

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

2 Likes
16

Oh wow Lucas :star_struck:

You are superb :facepunch:

1 Like
17

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

5 Likes
18

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

5 Likes
19
2 Likes
20

Great :ok_hand: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 :cherry_blossom:

2 Likes