Resolved: Adding image backgroud to gtk 3 window hiding widgets and layouts

Question:

I have created the GTK 3 window with multiple layouts, each contain some widgets on top of the main layout. Now I tried to add image background to the window. But the image is hiding all other layouts and widgets that exist in the main layout.
I have tested the same code in GTK 2, It is working as expected. (i.e) child layouts and widgets are showing on top of the pixmap.
Here is the code that I have tried.

GtkWidget*
create_wndmain (void)
{
  GtkWidget *wndmain;
  GtkWidget *lytmain;
  GtkWidget *lytpreview;
  GtkWidget *txtpreview;
  GtkWidget *lytutils;
  GtkWidget *txtutils;
  GtkWidget *lytfsys;
  GtkWidget *txtfsys;
  GtkWidget *pixmap;

  wndmain = gtk_window_new (GTK_WINDOW_TOPLEVEL);
  gtk_window_set_title (GTK_WINDOW (wndmain), _("Window"));
  gtk_window_set_position (GTK_WINDOW (wndmain), GTK_WIN_POS_CENTER);
  gtk_window_set_default_size (GTK_WINDOW (wndmain), 1024, 720);

  lytmain = gtk_layout_new (NULL, NULL);
  gtk_widget_show (lytmain);
  gtk_container_add (GTK_CONTAINER (wndmain), lytmain);

  pixmap = gtk_image_new_from_file("pixmaps/layout-1920x1080.png");
  gtk_container_add (GTK_CONTAINER (lytmain), pixmap);
  gtk_widget_show (pixmap);

  lytpreview = gtk_layout_new (NULL, NULL);
  gtk_widget_show (lytpreview);
  gtk_layout_put (GTK_LAYOUT (lytmain), lytpreview, 848, 88);
  gtk_widget_set_size_request (lytpreview, 168, 480);
  gtk_layout_set_size (GTK_LAYOUT (lytpreview), 400, 400);

  pixmap = gtk_image_new_from_file("pixmaps/layout-1920x1080.png");
  gtk_container_add (GTK_CONTAINER (lytpreview), pixmap);
  gtk_widget_show (pixmap);

  txtpreview = gtk_text_view_new ();
  gtk_widget_show (txtpreview);
  gtk_layout_put (GTK_LAYOUT (lytpreview), txtpreview, 8, 376);
  gtk_widget_set_size_request (txtpreview, 144, 80);
  gtk_text_buffer_set_text (gtk_text_view_get_buffer (GTK_TEXT_VIEW (txtpreview)), _("\n\n        Preview Area"), -1);

  lytutils = gtk_layout_new (NULL, NULL);
  gtk_widget_show (lytutils);
  gtk_layout_put (GTK_LAYOUT (lytmain), lytutils, 664, 8);
  gtk_widget_set_size_request (lytutils, 344, 72);
  gtk_layout_set_size (GTK_LAYOUT (lytutils), 400, 400);

  txtutils = gtk_text_view_new ();
  gtk_widget_show (txtutils);
  gtk_layout_put (GTK_LAYOUT (lytutils), txtutils, 16, 8);
  gtk_widget_set_size_request (txtutils, 312, 56);
  gtk_text_buffer_set_text (gtk_text_view_get_buffer (GTK_TEXT_VIEW (txtutils)), _("\n \tUtility Area"), -1);

  lytfsys = gtk_layout_new (NULL, NULL);
  gtk_widget_show (lytfsys);
  gtk_layout_put (GTK_LAYOUT (lytmain), lytfsys, 8, 88);
  gtk_widget_set_size_request (lytfsys, 192, 480);
  gtk_layout_set_size (GTK_LAYOUT (lytfsys), 400, 400);

  txtfsys = gtk_text_view_new ();
  gtk_widget_show (txtfsys);
  gtk_layout_put (GTK_LAYOUT (lytfsys), txtfsys, 32, 72);
  gtk_widget_set_size_request (txtfsys, 128, 328);
  gtk_text_buffer_set_text (gtk_text_view_get_buffer (GTK_TEXT_VIEW (txtfsys)), _("\n\n\n    File system Area"), -1);

  return wndmain;
}


int
main (int argc, char *argv[])
{
  GtkWidget *wndmain;

  gtk_init (&argc, &argv);

  wndmain = create_wndmain ();
  gtk_widget_show (wndmain);

  gtk_main ();

  return 0;
}

Answer:

It seems the philosophy of GTK3 is to steer more widget size/image/display functionality towards using CSS. With that in mind, I took your program and added a CSS provider widget to your program.

GtkCssProvider *provider;
provider = gtk_css_provider_new();

I then deactivated the section that places your pixel image inside the window.

  //pixmap = gtk_image_new_from_file("pixmaps/layout-1920x1080.png");
  //gtk_container_add (GTK_CONTAINER (lytmain), pixmap);
  //gtk_widget_show (pixmap);

Then after the window widget had been defined, I defined the CSS style information for the provider and then associated the provider with the window widget.

gtk_css_provider_load_from_data(provider, "window.background {background-image: url(\"/home/craig/images/aaa 1335.jpg\") }", -1, NULL);
gtk_style_context_add_provider(gtk_widget_get_style_context(wndmain), GTK_STYLE_PROVIDER(provider), GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);

Once the program was built, the various widgets appeared within the window.

So you might have to utilize CSS providers more in order to replicate the background behavior in GTK2.
Hope that helps.
Regards.

If you have better answer, please add a comment about this, thank you!

Resolved: Adding image backgroud to gtk 3 window hiding widgets and layouts

Resolved: std::regex_replace to replace multiple combinations

Resolved: How can I copy files using the ansible.builtin.copy module and avoid conflicting file names?

Resolved: Reshape tensors of unknown shape with tf.function

Leave A Reply