TKinter image background comes out a different color

Question

When my images are displayed, they all have a green background. When I open the original photos, the background is white. I'm using PIL.ImageTk.PhotoImage() as I know you are supposed to with .png files. but I'm unsure why this is happening.

from tkinter import *
from tkinter import font
from turtle import color
from webbrowser import *
import PIL.Image
import PIL.ImageTk

lastClickX = 0
lastClickY = 0

class App(Tk):
  def __init__(self):
    super().__init__()

    self.configure(bg= '#65737e')
    self.geometry("450x500")
    #self.overrideredirect(True)
    self.attributes('-topmost', True)
    self.resizable(False, True)
    self.bind('<Button-1>', self.SaveLastClickPos)
    self.bind('<B1-Motion>', self.Dragging)
    self.print_game()

  def SaveLastClickPos(self, event):
      global lastClickX, lastClickY
      lastClickX = event.x
      lastClickY = event.y

  def Dragging(self, event):
    x, y = event.x - lastClickX + self.winfo_x(), event.y - lastClickY + \
    self.winfo_y()
    self.geometry("+%s+%s" % (x, y))
  
  def print_game(self):
    im = PIL.Image.open('./Logos/Celtics.png')
    resized = im.resize((100, 100))
    celtics = PIL.ImageTk.PhotoImage(resized)

    label = Label(self, image = celtics, borderwidth=0, highlightbackground='#65737e' ,bg='#65737e')
    label.photo = celtics
    label.grid(row= 0, column = 0, padx= 20, pady= 10, sticky=W)

    frame = Frame(self, bg='#65737e')

    text = Label(frame, font=("Pacifico", 22, 'bold'), text="VS", highlightbackground='#65737e', bg='#65737e')
    text.grid()

    time = Label(frame, text="7:00pm EST", highlightbackground='#65737e', bg='#65737e')
    time.grid()

    frame.grid(row= 0, column= 1, padx=50)

    im = PIL.Image.open('./Logos/Bulls.png')
    resized = im.resize((100, 100))
    bulls = PIL.ImageTk.PhotoImage(resized)

    #team_2 = Label(root, image=bulls, borderwidth=0, highlightbackground='#65737e', bg='#65737e')
    team_2 = Label(self, image=bulls, borderwidth=0)
    team_2.photo = bulls
    team_2.grid(column=2, row=0, padx = 20, pady= 10, sticky = W)

if __name__ == "__main__":
  app = App()
  app.mainloop()

Could this have to do with resizing, or maybe one of the imported libraries? Or does it have something to do with the png files themselves?

Link to the photos I used: https://www.stickpng.com/cat/sports/basketball/nba-teams?page=1

Answer 1

I believe the issue is that transparent backgrounds will only work on canvas widget. I also noticed when reading the image, it's mode is 'P' (or at least when I ran it), and it needs to be 'RGBA'. So what I did was I left most of what you had, but added/changed a few things.

1. I open the image, convert to RGBA, resized, then saved that new image.
2. Then can PhotoImage on the new resized image
3. Utilized the canvas widget as opposed to the label.
4. Changed the im variable to a instance variable because local variable will be destroyed after the function exits

Code:

from tkinter import *
from tkinter import font
from turtle import color
from webbrowser import *
import PIL.Image
import PIL.ImageTk

lastClickX = 0
lastClickY = 0

class App(Tk):
  def __init__(self):
    super().__init__()

    self.configure(bg= '#65737e')
    self.geometry("450x500")
    #self.overrideredirect(True)
    self.attributes('-topmost', True)
    self.resizable(False, True)
    self.bind('<Button-1>', self.SaveLastClickPos)
    self.bind('<B1-Motion>', self.Dragging)
    self.print_game()

  def SaveLastClickPos(self, event):
      global lastClickX, lastClickY
      lastClickX = event.x
      lastClickY = event.y

  def Dragging(self, event):
    x, y = event.x - lastClickX + self.winfo_x(), event.y - lastClickY + \
    self.winfo_y()
    self.geometry("+%s+%s" % (x, y))
  
  def print_game(self):
    frameAway = Frame(self, bg='#65737e')
    canvasAway = Canvas(frameAway, bg="#65737e", width=100, height=100, highlightthickness=0)
    canvasAway.grid()  
    
    imAway = PIL.Image.open('./Logos/Celtics.png').convert('RGBA')
    imAway = imAway.resize((100, 100), PIL.Image.ANTIALIAS)
    
    imAway.save('./Logos/Celtics_resize.png')
    
    self.imAway = PhotoImage(file='./Logos/Celtics_resize.png')
    canvasAway.create_image(50, 50, image=self.imAway)
    frameAway.grid(row= 0, column = 0, padx= 20, pady= 10, sticky=W)
    

    frame = Frame(self, bg='#65737e')

    text = Label(frame, font=("Pacifico", 22, 'bold'), text="VS", highlightbackground='#65737e', bg='#65737e')
    text.grid()

    time = Label(frame, text="7:00pm EST", highlightbackground='#65737e', bg='#65737e')
    time.grid()

    frame.grid(row= 0, column= 1, padx=50)


    frameHome = Frame(self, bg='#65737e')
    canvasHome = Canvas(frameHome, bg="#65737e", width=100, height=100, highlightthickness=0)
    canvasHome.grid()  
    
    imHome = PIL.Image.open('./Logos/Bulls.png').convert('RGBA')
    imHome = imHome.resize((100, 100), PIL.Image.ANTIALIAS)
    
    imHome.save('./Logos/Bulls_resize.png')
    
    self.imHome = PhotoImage(file='./Logos/Bulls_resize.png')
    canvasHome.create_image(50, 50, image=self.imHome)
    frameHome.grid(row= 0, column = 2, padx= 20, pady= 10, sticky=W)


if __name__ == "__main__":
  app = App()
  app.mainloop()

Output: