Notebook background image

ete · **Joined:** Fri Jul 06, 2012 3:22 pm **Posts:** 4

Hello!

I'm new to GTK3 (playing with Glade and Quickly at the moment) and I want to add a background image to my notebook page.
In general it works with CSS but the image is also displayed in the tab, which I don't want to have. How I can display it only to the page background?

My CSS file looks simply like this:

Code:

GtkNotebook {
    background-image: url('my_image.jpg');
}

Any help is very appreciated!
Stefanie

kepica · **Posted:** Mon Jul 09, 2012 10:09 am

did you try to put some container inside of notebook ?
like GtkBox , and set background to that box only ?

ete · **Joined:** Fri Jul 06, 2012 3:22 pm **Posts:** 4

Yes I have a GtkBox inside each page and tried

Code:

GtkBox {
    background-image: url('my_image.jpg');
}

in the css file.

The Python code is (using Glade):

Code:

window = self.builder.get_object('box3')
style_context = window.get_style_context()
css_provider = Gtk.CssProvider()
css_provider.load_from_path('/home/stefanie/labtools/labtools/window.css')
style_context.add_provider(css_provider, Gtk.STYLE_PROVIDER_PRIORITY_USER)

but no image is displayed. Any ideas?
Thanks in advance!
Stefanie

zerohour · **Posted:** Mon Jul 09, 2012 4:39 pm

GtkNoteBook is considered a container widget. (The tabs are actually buttons) http://developer.gnome.org/gtk3/3.4/GtkContainer.html#GtkContainer.object-hierarchy

I can't be 100% sure but based on my own tests using various container widgets and the post listed below, which was answered by a high level GTK developer, it's not possible to apply a image (.gif, .png, .jpeg) or any other CSS to any container widget. CSS support for container widgets is planed for the future.
http://old.nabble.com/CSS-box-model-gtk-containers-integration-td33518387.html

For now you'll have to use gtk_image_new_from_file() or cairo_image_surface_create_from_png().
There's an example for cairo (C code) in the following link below but keep in mind it's for gtk2. In gtk3 drawing should be done with the "draw" signal like I've shone in the gtk forums tutorials section. Not the "expose-event" signal at zetcode.

Python:
http://cairographics.org/documentation/pycairo/3/reference/surfaces.html?highlight=create_from_png#cairo.ImageSurface.create_from_png
C language:
http://www.cairographics.org/manual/cairo-PNG-Support.html#cairo-image-surface-create-from-png
http://zetcode.com/tutorials/cairographicstutorial/cairoimages/

ete · **Joined:** Fri Jul 06, 2012 3:22 pm **Posts:** 4

Abbott wrote:

it usually happens when u have set an online image to desktop. if you have xp then u can try to remove all lists present in properties>desktop> icons.

I'm on Ubuntu 12.04.

I'll try zerohour suggestion!
Thanks

zerohour · **Posted:** Wed Jul 11, 2012 4:00 am

After much experimentation, it turns out this is possible to do with CSS.

Moved to the tutorials section: http://www.gtkforums.com/viewtopic.php?f=3&t=988&p=195463#p195463

ete · **Joined:** Fri Jul 06, 2012 3:22 pm **Posts:** 4

Oh wow zerohour, that's great! I could not manage it for the Ubuntu App Showdown but I'll use it in the future!
Finally I can make some more feminine looking apps :-)

Thanks a lot (maybe add it to the tutorial thread).

Stefanie

GTK+ Forums

Notebook background image

Who is online