3

I've been trying to add an image so that my buttons sit on top of the image, but have only been able to make the image cover everything completely or force the image to be underneath the horizontal part the buttons cover.

Here is the relevant code for it:

class MainMenu(Frame):
    def __init__(self, master):
        Frame.__init__(self, master)
        self.master = master
        self.initUI()

    def initUI(self):
        self.master.title("Adventure")
        bg = PhotoImage(file="Background-gif.gif")

        newGameButton = Button(self, text="New Game", height=2, width=20, command=self.newGame)
        newGameButton.pack(side=TOP, pady=50)
        loadGameButton = Button(self, text="Load Game", height=2, width=20, command=self.loadGame)
        loadGameButton.pack(side=TOP)
        quitButton = Button(self, text="Quit", height=2, width=20, command=self.close)
        quitButton.pack(side=TOP, pady=50)

        label = Label(self, image=bg)
        label.image = bg
        label.pack(fill=BOTH, expand=1)

        self.pack()

Many thanks.

Jon
  • 109
  • 2
  • 3
  • 11

1 Answers1

11

You could place an image on a canvas, and then place a button on the canvas:

import Tkinter as tk
import ImageTk

FILENAME = 'image.png'
root = tk.Tk()
canvas = tk.Canvas(root, width=250, height=250)
canvas.pack()
tk_img = ImageTk.PhotoImage(file = FILENAME)
canvas.create_image(125, 125, image=tk_img)
quit_button = tk.Button(root, text = "Quit", command = root.quit, anchor = 'w',
                    width = 10, activebackground = "#33B5E5")
quit_button_window = canvas.create_window(10, 10, anchor='nw', window=quit_button)    
root.mainloop()

enter image description here

Community
  • 1
  • 1
unutbu
  • 842,883
  • 184
  • 1,785
  • 1,677