1

I'm trying to create my first GUI, using Python and Tkinter. I want to have a background image that resizes accordingly with the window size, along with two labels on top of the background, both placed about midway on the window. The two labels are "Full Name" and "Education", as shown in my code below.

Currently, I'm using the pack() method, and I've been using the window resizing code from here.

My question is: How do I get the labels to overlap the background image (also a label in my code)? With my current code, the background image seems to be on top of the frame and labels.

Attached is a picture of the output/GUI I'm looking for, except I want my image to be in the background.

GUI

#Resize using label

from tkinter import *
from tkinter import ttk
from PIL import Image, ImageTk

root = Tk()
root.title("Title")
root.geometry('600x600')

def resize_image(event):
    new_width = event.width
    new_height = event.height
    image = copy_of_image.resize((new_width, new_height))
    photo = ImageTk.PhotoImage(image)
    label.config(image = photo)
    label.image = photo #avoid garbage collection

#Background image
image = Image.open("filepath.jpg")
copy_of_image = image.copy()
photo = ImageTk.PhotoImage(image)
label = Label(root, image = photo)
label.bind('<Configure>', resize_image)
label.place(x=0, y=0, relwidth=1, relheight=1)
label.pack(fill=BOTH, expand = YES)
label.lower()

frame = Frame(root, width=600, height=600, relief='raised', borderwidth=2)
frame.pack(fill="both", expand=True)
frame.pack_propagate(False) 

#Top Frame
top_frame = Frame(frame,width=600, height=350)
top_frame.pack(side = TOP)

#Various Labels
Label(frame, text = 'Full Name', width = 8).pack()
Label(frame, text = 'Education', width = 8).pack()

root.mainloop()
martineau
  • 119,623
  • 25
  • 170
  • 301
Kelsey
  • 401
  • 9
  • 21
  • Hi Kelsey and welcome to StackOverflow! You posted a good well-written question but I think it is essentially asking the same thing as this [question](https://stackoverflow.com/q/15795916/404469) except you are asking about a label rather than a button. That question was answered by putting the image onto a TkInter Canvas object. Hope it helps! – gary Dec 14 '18 at 17:00
  • 1
    @gary, Thank you for the link, but the question doesn't appear to be quite the same. I think where I'm running into issues is with the window resizing. Regardless, when I make the background image a Canvas instead of Label, I'm left with the exact same result. It's not showing up behind the labels for me. – Kelsey Dec 14 '18 at 17:48

1 Answers1

2

Some rearrangement is in order. Your large frame is sitting atop the background image, covering it completely. So, let's make the background Label part of frame, not root. You should probably either place() or pack() but not both. To get the other labels to the center, I created a centered frame and packed them in to it. There are probably other ways to do all of this:

from tkinter import *
from PIL import Image, ImageTk

def resize_image(event):
    new_width = event.width
    new_height = event.height

    image = copy_of_image.resize((new_width, new_height))
    photo = ImageTk.PhotoImage(image)

    label.config(image=photo)
    label.image = photo  # avoid garbage collection

root = Tk()
root.title("Title")
root.geometry('600x600')

frame = Frame(root, relief='raised', borderwidth=2)
frame.pack(fill=BOTH, expand=YES)
frame.pack_propagate(False)

copy_of_image = Image.open("filepath.jpg")
photo = ImageTk.PhotoImage(copy_of_image)

label = Label(frame, image=photo)
label.place(x=0, y=0, relwidth=1, relheight=1)
label.bind('<Configure>', resize_image)

center_frame = Frame(frame, relief='raised', borderwidth=2)
center_frame.place(relx=0.5, rely=0.5, anchor=CENTER)

Label(center_frame, text='Full Name', width=8).pack()
Label(center_frame, text='Education', width=8).pack()

root.mainloop()
cdlane
  • 40,441
  • 5
  • 32
  • 81
  • ***You should probably either place() or pack() but not both.***... Actually `place()` is used in this kind of situation. By using `place()` for the background image you will insure the image is not affected by frame resizing. Also `place()` does not affect the other 2 geometry managers. Only time you run into issues is when you try to `pack()` and `grid()` in the same container. – Mike - SMT Dec 14 '18 at 18:38