Using images in CSS

Software darktable
1

By customizing the stylesheet (CSS), I would like to assign a custom background image to certain elements of the darktable interface.

According to Gtk – 3.0: CSS Overview, this is possible.

I also see that “\lib\gdk-pixbuf-2.0\2.10.0\loaders” contains .dlls for many image formats.

I created a .png (metal) to change the appearance of a button, and I’ve tried everything I can think of:

  • changing the directory
  • changing the image extension (.jpg, .png)
  • using different images
  • using ‘background’ instead of ‘background-image’
  • restarting after each change
  • using MSYS2 MINGW64 → GTK Inspector and analyzing the element

but nothing seems to work.

I adapted the code to see if it would display an image with something as outrageous as this (image included in the distribution):

#module-header { 
background-image: url('../pixmaps/splashscreen-02.jpg');
}

But it didn’t work for me either.
The distribution’s stylesheets mostly make calls like:

#iop-panel-icon-ashift {
background-image: url('../pixmaps/plugins/darkroom/ashift.svg');
}

In this case, GTK Inspector does show ‘url("data:image/png;base64, …’
(not .svg).

My environment is Windows 10.

So here are the questions for the darktable experts:

  • Does darktable allow me to do what I want?
  • If so, what am I doing wrong?
2

I solved it myself and managed to make a first sketch.
Case closed.

Captura de pantalla 2026-08-29 114344
Captura de pantalla 2026-08-29 114344459×667 75.2 KB

2 Likes
3

It looks nice. Would you like to share your knowledge with us? It will be very appreciated. Thanks!

2 Likes
4

Feel free to share … :grinning:

2 Likes
5

Noted. Sharing works both ways, btw.

2 Likes
6

@leonidas111, @Flech, and @Rvietor

First:
I’d like to point out that the translator can sometimes lead to misunderstandings between different people’s words.

Second, a bit of pent-up frustration:
I agree with you that we all benefit from sharing.
In fact, I’ve been sharing Pìxls on Reddit and GitHub from the very beginning.
But this should start being a two-way street.

One of my first posts was to share, without any self-interest, the darktable theme I’m working on.
Unfortunately, in all this time, I’ve only received one positive comment, like, or expression of gratitude. The rest have been questions and skepticism that I didn’t understand. To top it all off, the admin decided to lock the thread, preventing me from expanding on it or receiving better feedback.

Later, in several threads, I’ve asked questions, but I’ve only received silence regarding their resolution.
In this same post, after more than 70 views, not a single comment or help. And, frankly, I think there are people here with enough knowledge to provide at least a minimal answer or guidance on the issues raised. That’s why I’ve replied to myself by closing the thread.

All of this leads me to believe there’s no interest in what I might share. Nor in addressing questions that would allow me to develop a topic that seems to bother the purists, in a paternalistic attitude that no one asked for.

This is free software, and we should support the freedom to use the tool and the UI as each person wishes.

Because of all the above, receiving these three comments now irritates me a bit. Although you’re not to blame for it.

Third: Share what?

a) The resolution of the issue raised:

The problem was in the URL format.
The path has to be absolute.
This can be a problem for someone who wants to do something generic, and not a custom solution.

background-image: url("file:///c:/Users/ChiMo/Desktop/metal.png");

At this point, I’m adding another “shared” element.
On the other hand, I would appreciate any comments on how to get relative paths that work.

b) the specifics in a theme for darktable:
That’s what I wanted it for. Initially, to tailor it to my needs.
As for sharing it, perhaps in the future, depending on the feedback.

3 Likes
7

If I may offer my perspective. I think @leonidas111 and @Flech were asking out of curiosity and @rvietor probably too, though he worded it slightly harshly.

If you don’t get help on a question on this forum I honestly think that people just don’t know. I can understand that this feels frustrating but judging by how eagerly the community rushes to help in many cases demonstrates that the willingness to help is there.

And: Thanks for sharing your solution. Someday someone will Google the same question you had and be glad to be able to find the solution. And the latter would have not been had you not shared it ;-).

2 Likes
8

Yeah, definitely out of curiosity.

Unfortunately, even though I have experimented with Darktable and css, I could offer no help for @ChiMo. But that does not mean I am not curious as to what the solution was.

9

Thanks for sharing. :+1:

Yeah, there definitely was interest in what solution you came up with, even though the absolute path is not the solution I had hoped for.

1 Like
10

I’ve finally figured out why relative image paths weren’t working the way I was doing it.

To speed things up, I usually start by testing within the darktable editor. If it works, I transfer the text to my .CSS file and verify. Until now, almost everything had worked for me following this method.

I just discovered that GTK, when reading the .CSS file, considers the location of the .CSS file as the reference path.

When using the darktable editor and clicking “save and apply CSS,” a “user.css” file is created in my user profile location (C:\Users\MY_NAME\AppData\Local\darktable), which is different from the location of the darktable installation and its themes ([installation_path]\share\darktable\themes).

Therefore, if you write the following in the darktable editor:

@import url("darktable.css");
button {
    background-image: url('../pixmaps/idbutton.png');
}

This doesn’t work because ‘…/’ moves up one directory relative to the reference. Specifically, it’s located in “C:\Users\MY_NAME\AppData\Local”. Then it tries to move down to ‘\pixmaps…’ but it doesn’t exist. Result: the image doesn’t load.

However, if you create a CSS file, using only the code above, in [installation_directory]\share\darktable\themes with that same code and select it as the darktable theme, you’ll see that it DOES work (at your own risk and accepting the joke :sweat_smile:).

Therefore, considering the above, relative image paths do work.

4 Likes