1

I have recently started working with gtk-rs for the first time and I'm trying to use an svg file defined in a css file as the background for a box. All my css on my other elements load in perfectly and the properties for the box also load in but the background image won't load.

Is this possible to do in gtk-rs or should I look for another way?

CSS:

entry-box {
    background-image: url(dexEntryBackground.svg);
    background-position: center center;
    background-repeat: no-repeat;
}

GTK-RS:

gtk::Box::builder()
    .orientation(Orientation::Horizontal)
    .width_request(1290)
    .height_request(470)
    .css_name("entry-box")
    .build();

For the purpose of the POC the file structure is flat so it just looks like:

src/
 - dexEntryBackground.svg
 - main.rs
 - style.css
Jmb
  • 18,893
  • 2
  • 28
  • 55
macl
  • 11
  • 2
  • Shouldn't the name [selector](https://docs.gtk.org/gtk3/css-overview.html#selectors) be `#entry-box`? Otherwise, I can confirm that the `background-image: url()` syntax can be used with SVG files, but so far I have always seen it with quotes: `url("dexEntryBackground.svg")`. – ccprog Nov 20 '22 at 14:34
  • The # isn't actually necessary for gtk-rs, all the other properties work fine without it and adding one to this one didn't change anything. The double quotes was indeed a valid point but sadly that also didn't change anything. – macl Nov 20 '22 at 21:54
  • I tried out your code, and I can confirm that it works. However I noticed that, if I get the image path wrong, it doesn't show up but all the other css still works, just as you described. Have you tried using an absolute path for your image? For example `url("/home/user/Pictures/backgrounds/dexEntryBackground.svg")` If that works, then it shows that the relative path you are using is incorrect. – Sylvester Kruin Jun 01 '23 at 12:09
  • Actually fixed this issue a few months ago but forgot to report back here, the key issue was that gtk css doesn't recognize what it's looking at in the background image field so this solved the issue: background-image: url("file:/path/to/file/background.svg"); – macl Jun 02 '23 at 13:37

0 Answers0