Set my image as background

Feature Requests
1

Hello!!

I'm trying to set my own image as the background of my retool website but it doesn't let me put my own image. it seems it only accept color from the palette (main>style>background ). there is a way to do it?

2

Hey @Matilde_Sartori!

We are internally tracking requests for adding background images to containers (which would also let you set a background image for your whole app using Expand content to fit on the main frame):

I've linked this thread as well so that we can let you know if it's included! In the meantime, you can try setting the background-image property on the .retool-grid-content element using custom CSS:

2 Likes
3

A background image on retool mobile would be most welcome as well.

4

Noted, thank you @BobandBill! To double check, you mean a background image on the entire Mobile app, correct?

5

Yes, and/or as the background of a container. That would be even more helpful.

6

Passed that along, thank you :slight_smile:

7

this is the css i use to put a background on a component

._retool-container-container1{
  background-image: url('data:image/png;base64,{{mainViewBackgroundImageQuery.data.base64Data}}');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

@Kabirdas is .retool-grid-content referring to like the base/root element for every app? would it also be a better approach than using a container (1 less component in the tree i guess or something?)

8

Correct! Adding a background image to .retool-grid-content will allow you to set a background image for the entire app.

If you set the CSS in your org's Settings > Advanced > Preloaded CSS, you can even set that same background image for all your apps!

1 Like
9

TIL you can put template strings in the Custom CSS :exploding_head: