Python Forum
[Tkinter] Not able to get image as background in a Toplevel window
Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
[Tkinter] Not able to get image as background in a Toplevel window
#1
Hi All,

I have the below code:

from tkinter import * # imports all from tkinter
from tkinter import messagebox # imports messagebox
from PIL import ImageTk, Image #imports pillow for images
import random # imports random

menu_page=Tk() #creates the menu_page
menu_page.title("Enter Names") #titles the menu_page
menu_page.attributes("-fullscreen", True) #makes the menu_page fullscreen                                                                
menu_page.resizable(False,False) #stops resizing of the menu_page

image_open = Image.open("Z:\Finley\School\Sixth Form\CS\Projects\Connect 4\Images\main_background.gif") #change to where the picture is
image = ImageTk.PhotoImage(image_open)

bg = Label(image=image) #makes the label the image
bg.image = image

bg.place(x=-10, y=-10) #places the label in the background

title_label_photo = PhotoImage(file=r"Z:\Finley\School\Sixth Form\CS\Projects\Connect 4\Images\connect_4_title.png")
title_label = Label(menu_page, image=title_label_photo, bg='#E4D6B6')  # label details
title_label.place(x=600, y=20)  # places the label

label_1 = Label(menu_page, text="Player 1 Name:", font=("Comic Sans MS", "16"), bg="#E4D6B6") # label details
label_1.place(x=575, y=220) # places label

entry_1 = Entry(menu_page, width=40) # details for entry box
entry_1.place(x=745, y=230) # places entry box

label_2 = Label(menu_page, text="Player 2 Name:", font=("Comic Sans MS", "16"), bg="#E4D6B6") # details for label
label_2.place(x=575, y=290) # places label

entry_2 = Entry(menu_page, width=40) # details for entry box
entry_2.place(x=745, y=300) # places entry box

def exit_menu(): # function for when exit is pressed
    menu_page.destroy() # closes menu page

exit_button_photo = PhotoImage(file=r"Z:\Finley\School\Sixth Form\CS\Projects\Connect 4\Images\exit_menu.png") # opens the image to be used
exit_button = Button(menu_page, image=exit_button_photo, command=exit_menu)  # closes the login and opens menu
exit_button.place(x=1320, y=781) # places button

def toggle(): # function to change the colour and text of label next to the players
    if p1_colour_label["text"] == "Red": # if the label has text red
        p1_colour_label.config(text="Yellow", fg="#FFFE00") #switches colours
        p2_colour_label.config(text="Red", fg="#FF0000") # switches colours
    else: # if the abel has text yellow
        p2_colour_label.config(text="Yellow", fg="#FFFE00") # switches colours
        p1_colour_label.config(text="Red", fg="#FF0000") # switches colours

def start_play(): # function for when play is presses

    player1_name = entry_1.get() # gets the string from entry box 1
    player2_name = entry_2.get() # gets the string from entry box 2

    if len(player1_name) == 0:
        messagebox.showwarning("Missing Names", "One or more of the boxes hasnt been filled in, please correct this.")
    elif len(player2_name) == 0:
        messagebox.showwarning("Missing Names", "One or more of the boxes hasnt been filled in, please correct this.")
    else:
        random_num = random.randint(18, 25) # picks a random number

        for i in range(random_num): # loops round a number of times set by the random number
            menu_page.after(i*100, toggle) # after 100ms run toggle

        if (random_num % 2) == 0: # checks if it is an even or odd number whcih tells me where red is on so we know who goes first
            players_turn = "player_1" # sets players turn to player 1
        else:
            players_turn = "player_2" # sets players turn to player 2

        play_button.lift() # brings the play button forward to show it

#############################################################################################################################

def play_game():
    
        main_game = Toplevel()
        main_game.title("Connect 4")
        main_game.attributes("-fullscreen", True) #makes the menu_page fullscreen                                                                
        main_game.resizable(False,False) #stops resizing

        image_open_background = Image.open("Z:\Finley\School\Sixth Form\CS\Projects\Connect 4\Images\Connect_4_Background.gif")  # opens the image
        image_background = ImageTk.PhotoImage(image_open_background)
        bg = Label(image=image_background)  # sets the image to a label
        bg.image = image_background  # makes the background the image
        bg.place(x=200, y=100)  # positions the image in the background

    


#############################################################################################################################

submit_button_photo = PhotoImage(file=r"Z:\Finley\School\Sixth Form\CS\Projects\Connect 4\Images\submit_main.png") # opens the image to be used
submit_button = Button(menu_page, image=submit_button_photo, command=start_play)  # closes the login and opens menu
submit_button.place(x=505, y=400) # places button

play_button_photo = PhotoImage(file=r"Z:\Finley\School\Sixth Form\CS\Projects\Connect 4\Images\play_main.png") # opens the image to be used
play_button = Button(menu_page, image=play_button_photo, command=play_game)  # closes the login and opens menu
play_button.place(x=505, y=400) # places button

submit_button.lift()

p1_colour_label = Label(menu_page, text="Red", fg="#FF0000", bg="#E4D6B6", font=("Comic Sans MS", "16"))
p1_colour_label.place(x=1000, y=223)

p2_colour_label = Label(menu_page, text="Yellow", fg="#FFFE00", bg="#E4D6B6", font=("Comic Sans MS", "16"))
p2_colour_label.place(x=1000, y=293)

menu_page.mainloop()
In the play_game function, I want it to open s new window titled connect 4 which it successfully does. But then I want it to display the image 'Connect_4_Background' on that toplevel window as the background image. However, when I run this, it puts the image in the background but on the menu_page instead of the main_game. How do I fix this and make the image the background of the Toplevel window instead?

Regards
"Only Boring People Get Bored"
Reply
#2
Your image is being displayed by a Label, but the Label has not been given a parent as its first attribute so it is defaulting to the main window.

from tkinter import * # imports all from tkinter
and floods the namespace
Reply
#3
So what would i need to do to fix this issue?

Would i need to do:
from tkinter import Label
Or is there soemthing else i need to change as well?
"Only Boring People Get Bored"
Reply
#4
To get the imagine to display where you want it to, add a parent where it says parent_here below
bg = Label(parent_here, image=image_background)

To find out about flooding the namespace read the link.
Reply
#5
Great! It worked thanks for the help.
"Only Boring People Get Bored"
Reply


Possibly Related Threads…
Thread Author Replies Views Last Post
  Interaction between Matplotlib window, Python prompt and TKinter window NorbertMoussy 3 489 Mar-17-2024, 09:37 AM
Last Post: deanhystad
  Transparent window background, but not text on it muzicman0 7 2,849 Feb-02-2024, 01:28 AM
Last Post: Joically
  pass a variable between tkinter and toplevel windows janeik 10 2,328 Jan-24-2024, 06:44 AM
Last Post: Liliana
  My Background Image Is Not Appearing (Python Tkinter) HailyMary 2 4,236 Mar-14-2023, 06:13 PM
Last Post: deanhystad
  [Tkinter] Open tkinter colorchooser at toplevel (so I can select/focus on either window) tabreturn 4 1,900 Jul-06-2022, 01:03 PM
Last Post: deanhystad
  [Tkinter] Toplevel window menator01 5 3,039 Apr-18-2022, 06:01 PM
Last Post: menator01
  [Tkinter] Background inactivity timer when tkinter window is not active DBox 4 2,922 Apr-16-2022, 04:04 PM
Last Post: DBox
  [Tkinter] Images in Toplevel() finndude 4 4,289 Mar-09-2021, 09:39 AM
Last Post: finndude
  Trying to make random image loop in Tk window using python Jediguy18 1 3,207 Dec-30-2020, 04:56 AM
Last Post: deanhystad
Photo Tkinter TEXT background image _ShevaKadu 5 7,765 Nov-02-2020, 10:34 AM
Last Post: joe_momma

Forum Jump:

User Panel Messages

Announcements
Announcement #1 8/1/2020
Announcement #2 8/2/2020
Announcement #3 8/6/2020