Background button image from file (CSS)

[Dario (D)]

Hi,
I have some .svg images that i want to display in some buttons, based on the style classes.
When i use the environment variable

export GOBJECT_DEBUG=instance-count
export GTK_DEBUG=interactive

and then exec the gui i can show the images by pasting the folowing code in the CSS window:

.btn_carriage
{
	background:url("icons/generic_carriage_gray.svg") 0px 10px no-repeat;
	background-size:100%;
	background-color:rgba(0,0,0,0);
	border:none;
}

But when i try to use my stle.css file inside my exec directory the images are not shown. i know that style.css file works because if i remove the “background: url” part and change the background color i can see the button;
I think the problem is that the image cannot be found, but i don’t know how to define it.
My structure is:
GUI_FOLDER:code, executable, style.css and icons folder (containing the images)
Any help is apreciated
Thanks
Dario

EDIT: i tried to change the load of the css file from the resources to a file and it works… but i don’t know why:

Here my css load part changed

 GtkCssProvider *cssProvider = gtk_css_provider_new();
        GError *error = NULL;
        GFile *css_file = g_file_new_for_path("/home/da/GUI/style.css");
        // gtk_css_provider_load_from_resource(cssProvider, "/css/style.css");
        gtk_css_provider_load_from_file(cssProvider, css_file, &error);
        gtk_style_context_add_provider_for_screen(gdk_screen_get_default(), GTK_STYLE_PROVIDER(cssProvider), GTK_STYLE_PROVIDER_PRIORITY_USER);
       if (error)
        {
            // Display a warning if the stylesheet is not loaded
            g_warning("%s", error->message);

            // Free the memory allocated for the error
            // and acknowledge the error has been processed
            g_clear_error(&error);
        }

        g_object_unref(css_file);

here my resources file:

<?xml version="1.0" encoding="UTF-8"?>
<gresources>
  <gresource prefix="/hmi">
    <file preprocess="xml-stripblanks">ui_dir/macchia.ui</file>
    <file preprocess="xml-stripblanks">ui_dir/DMC1.ui</file>
  </gresource>
  <gresource prefix="/css">
    <file>style.css</file>
  </gresource>
</gresources>

EDIT 2
It’s seems that when css is loaded from resources it cannot access the images inside the icon folder anymore. I tried to add the image in the gresource.xml file too but doesn’t work:

<?xml version="1.0" encoding="UTF-8"?>
<gresources>
  <gresource prefix="/hmi">
    <file preprocess="xml-stripblanks">ui_dir/macchia.ui</file>
    <file preprocess="xml-stripblanks">ui_dir/DMC1.ui</file>
  </gresource>
  <gresource prefix="/css">
    <file>style.css</file>
    <file>icons/generic_carriage_gray.svg</file>
  </gresource>
</gresources>

.btn_carriage{
background:url("/css/generic_carriage_gray.svg") 0px 10px no-repeat;
background-size:100%;
background-color:rgba(0,0,0,0);
border:none;
}

[Dario (D)]

I finally managed to do it:

style.css

.btn_carriage{
background:url("resource:///css/icons/generic_carriage_gray.svg") 0px 10px no-repeat;
background-size:100%;
background-color:rgba(0,0,0,0);
border:none;
}

gresource.xml

<?xml version="1.0" encoding="UTF-8"?>
<gresources>
  <gresource prefix="/hmi">
    <file preprocess="xml-stripblanks">ui_dir/macchia.ui</file>
    <file preprocess="xml-stripblanks">ui_dir/DMC1.ui</file>
  </gresource>
  <gresource prefix="/css">
    <file>style.css</file>
    <file>icons/generic_carriage_gray.svg</file>
  </gresource>
</gresources>