CSS Not Applying to Container

Hello -

I have an empty container that I am trying to add a background image to using custom css, however it doesn't appear to take. I've tried adding !important to see if that helped, but it didn't. Why doesn't this CSS work? I found a similar post from a few years ago showing that this should work. Has anyone else been successful at this?

Here is the CSS I am using:

._retool-container1 {
    background-image: url('https://www.bowlandbarrel.com/sanantonio/wp-content/uploads/sites/2/2021/09/red-box-background.jpg') !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;

Hello, the css is working, but it seems that the selector is the "container" of the container element and not the actual white section you see

in general, retool components are built with various elements, so you need to find the correct selector

if you set a higher radius to the container you will able to see the image below it

Note: Selectors may differ

#retool-widget-container1 > div > div._K6paF > div > div > div > div > span > div > section > div > div > div {
  background-image: url();
  background-size: cover;

I'm not sure this is the right answer. This method only applies the background in the editor. That means when you're actually running the app, it wouldn't work.

I thought the entire point of Retool's CSS was so that you could refer to the object, as I have done. It also seems odd that it used to work, as we can see in the previous post that I linked. I'm thinking this is a bug.

Thats why Retool's Custom CSS is not recommended in all cases, selectors can change between versions, but you can search the selector when is in view mode

This is a post about Custom CSS in Retool

Please note , we strongly recommend using Retool's built-in style and theme options whenever possible. Class names and DOM structure may change as new features are added that could break custom CSS.

this is amazing!, thank you i followed your steps and got it correct for container,

but how did you get the exact container ?
i would want to add custom CSS for other container as well

Hey, i think this is a better approach (less complex CSS)

just set containers background opacity to 0

1 Like

This perfectly works!
thank you.

1 Like