Python Forum

Full Version: Not able to get image as background in a Toplevel window
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
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
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
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?
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.
Great! It worked thanks for the help.