CSS Not Applying to Container

App Building
, ,
1

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;
}

image
image2212×728 111 KB

2

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
image

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

3

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

image
image987×235 37.4 KB

image
image980×357 72.9 KB

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;
}
4

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.

5

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

6

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.

7

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

8

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

image
image1365×608 103 KB

just set containers background opacity to 0

1 Like
9

This perfectly works!
thank you.

1 Like