418. How to place a background image in GtkWindow - Part 3 - align top left - using GtkStyle?

Problem

Suppose you want to have a single background image that always stayed at the top left corner of a GtkWindow (no matter how the user changes the window size) as shown below.

How to place a background image in GtkWindow - Part 3 - align top left - using GtkStyle?


Solution

  • There are a couple of ways to make a background image stays at the top left corner of a GtkWindow.
  • This article uses the GtkStyle method as described in How to place a background image in GtkWindow - Part 2 - tiled background image?.
  • As explained in that article, the background image will always be tiled if its size is smaller than the window size.
  • So the 'trick' to have a single background image is to have the background image larger than the window size.
  • A pretty safe background image size is 1920x1200. Most displays in the market are less than this dimension.
  • If you're using Photoshop, load your image and increase the canvas size to 1920x1200. Don't forget to move your image to the top left corner.
  • You might think that an image of such size will be huge. But it won't be. Because of the way the jpg, gif or png are stored, those "empty" pixels won't occupy much space. The original image (150x70) is 1.62K. The same image padded to 1920x1200 is only 5.75K. Most PHP-GTK2 apps are run locally (as opposed to over the Internet). So you won't notice any speed difference in the loading of these background images.

Sample Code

Note: The following image file (sample6_1920_top_left.png) is required by the sample code below. Please save a copy of the image files and put them in the same directory where you store the sample code.

 

1   
 2   
 3   
 4   
 5   
 6   
 7   
 8   
 9   
 10   
 11   
 12   
 13   
 14   
 15   
 16   
 17   
 18   
 19   
 20   
 21   
 22   
 23   
 24   
 25   
 26   
 27   
 28   
<?php
$window = new GtkWindow();
$window->set_size_request(480, 240);
$window->connect_simple('destroy', array('Gtk','main_quit'));
$window->add($vbox = new GtkVBox());

// display title
$title = new GtkLabel("Place a background image in GtkWindow\n".
"   Part 3 - align top left - using GtkStyle");
$title->modify_font(new PangoFontDescription("Times New Roman Italic 10"));
$title->modify_fg(Gtk::STATE_NORMAL, GdkColor::parse("#0000ff"));
$title->set_size_request(-1, 40);
$vbox->pack_start($title, 0);
$vbox->pack_start(new GtkLabel(), 0);
$vbox->pack_start(new GtkLabel("Try enlarge the window."));
$vbox->pack_start(new GtkLabel("The background image remains at top left."));

// set background image
$pixbuf=GdkPixbuf::new_from_file("sample6_1920_top_left.png");
list($pixmap,$mask)=$pixbuf-> render_pixmap_and_mask(255);
$style = $window->get_style();
$style=$style->copy();
$style->bg_pixmap[Gtk::STATE_NORMAL]=$pixmap;
$window->set_style($style);

$window->show_all();
Gtk::main();
?>

Output

As shown above.
 

Explanation

The sample code above is exactly the same as that of the article How to place a background image in GtkWindow - Part 2 - tiled background image? (The only diffference is the background image.)

Pleaes refer to the article for explanations.

Note

Try changing the window size. Notice that the background image will also stay at the top left corner of the window as shown below:

Related Links

Add comment

Security code
Refresh