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

It has transparent background and you may see color of your widget. — furas, Mar 09 '22 at 05:14
if you would reduce code to single Label with single image then we could test it on our coumputers - maybe it is problem only on some systems (Windows, Linux, Mac) — furas, Mar 09 '22 at 05:17
If you print the information of the image, i.e. `print(im)`, you will see that it is a mode "P" image (8-bit color image). I think you need to convert it to "RGBA" mode in order to let Pillow module to handle the transparency correctly. — acw1668, Mar 09 '22 at 06:41
Is this something easy to do in python or would you suggest just converting all my images separately? — Eric Hubbard, Mar 09 '22 at 11:42
looks like you need to use canvas instead of label. Read it [here](https://stackoverflow.com/questions/56554692/unable-to-put-transparent-png-over-a-normal-image-python-tkinter) — chitown88, Mar 09 '22 at 17:18

score 1 · Answer 1 · answered Mar 10 '22 at 10:31

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.

I open the image, convert to RGBA, resized, then saved that new image.
Then can PhotoImage on the new resized image
Utilized the canvas widget as opposed to the label.
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:

TKinter image background comes out a different color

1 Answers1