Component background color

Not sure if this feature already requested as I couldn’t find it while searching.

It helps greatly in the presentation if we have ability to assign a color (or even image) in the background per component - for at least key components types if not all.

6 Likes

+1

Would love this as well, provides a good look to it.

As a workaround, I’m now designing images with fake buttons to use as my “home” screen.

1 Like

@adelhammoud a lil’ trick may help you

In Data editor, create a Template column and add this code:

<a style="position: fixed;
width: 100%;
top:10%;
right: 0%;  z-index:-1;">
<img src="URL" /></a>

Replace URL to the Pic column. In the screen you wanna add this background, add a Rich Text component and the result will something like this :point_down:t3:

(The code is not 100%, but when I improve it, it’s cool to fit the image in the whole screen)

3 Likes

So you’re saying I won’t have to design fake buttons anymore? Music to my ears, brother :rofl:

Gonna try this trick right now.

1 Like

:joy:

Actually I still fake buttons with images, but not as this, cause the bg is fixed.

2 Likes

@ThinhDinh What about mix bg and fake buttons with png images?

That would work, I believe. I have no experience with trying this background thing so I sincerely hope it would work well so that I have a viable alternative. Thanks in advance :heart_eyes:

1 Like

Holy hell it works.

image

I dream of having somekind of a Spotify vibe, this will help me a lot. Thank you Lucas!

2 Likes

Tried my luck with background-repeat: repeat-y… No luck :cry:

This is beautiful. Wondering if it will work with Gifs

1 Like

This is nice but :
(1) It gives a background image to the whole page. I wonder how can we setup up background per component.
(2) Glide keeps reminding all of us to avoid using HTML tags as we are not sure when it won’t work anymore (I do actually :slight_smile: )

Of course!

If I understand correctly do you want to use this trick on a fixed component on the screen?

Then it is possible by changing the “fixed” text in the code.

What I did, insert the code with an image (yellow), making the adjustments of “width” “right” and “top” when the image reached the desired position, I will change the “fixed” to “absolut” and the image ( yellow) remains.

3 Likes

Thank you for the tip Roberto, I will try this later as well!

1 Like

Is this still working?

I tried it but it’s not working for me.

Here’s a picture of how I put it in the template in case I made a mistake.

Thanks @Lucas_Pires!

Change the URL value to your image’s web link @Santiago_Perez1

Something like img src=“ https://image.freepik.com/vector-gratis/plantilla-diseno-logotipo-pizza_15146-192.jpg

Saludos

1 Like

I’d say exactly what @gvalero said

Thanks @gvalero @Lucas_Pires.

It worked. I had to use a pic.

Saludos

1 Like