How to set a custom image as the tab sidebar background?

[vavakado]

I suppose it's possible using userChrome or userContent.css

[dosubot[bot]]

Hey @vavakado! I'm here to help you out with any bugs, questions, or contributions you might have. Let's tackle this together!

To set a custom image as the tab sidebar background using userChrome.css or userContent.css, you can use the background-image CSS property. Here's a basic example of how you might do this in userChrome.css:

#vertical-pinned-tabs-container {
    background-image: url("path/to/your/image.png");
    background-size: cover; /* Adjusts the image to cover the entire area */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    background-position: center; /* Centers the image */
}

Replace "path/to/your/image.png" with the actual path to your image file. This CSS targets the #vertical-pinned-tabs-container element, which is part of the tab sidebar ^[1].

To continue talking to Dosu, mention @dosu.

[vavakado]

It didn't work however I managed to change the background of the whole sidebar using this code

#tabbrowser-tabs {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("wallhaven-rd9jpq.png") !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

[vavakado]

the linear-gradient stuff is just to make the image darker