python - Tkinter - Button Image Transparent Background

Question

I have worked out how to have an image for a button, thats positioned on top of a label (I think I maybe doing it the long-winded way because I can't install PIL on my Mac for some reason). Anyhow, it works as it should to a certain degree - the problem I have is it's adding white space either side, and then the image itself is not displaying its transparent background.

The code I am using is as follows:

from tkinter import *
#from PIL import Image

root = Tk()


#Removes the title bar and places over mac top bar
root.tk.call("::tk::unsupported::MacWindowStyle", "style", root._w, "plain", "none")
# Makes the app full screen
#root.wm_attributes('-fullscreen', 1)

root.geometry('{}x{}'.format(480, 320))
#root.attributes('-topmost', True)

def quitApp():
    # mlabel = Label (root, text = 'Close').pack()
    root.destroy()


background_img = PhotoImage(file="images/bg.gif")
scanBtn_img = PhotoImage(file="images/scanBtn.gif")

background = Label(root,
                   compound = CENTER,
                   quitButton = Button(image=scanBtn_img, command = quitApp).pack(),
                   image = background_img).pack(side="right")

background.image = background_img # keep a reference!


root.mainloop()

are you sure you are on python 2.7 because you are importing tkinter in lowercase as python 3. — Mike - SMT

Mike - SMT Mike - SMT · Accepted Answer · 2017-06-02T16:37:12

From what I understand tkinter natively supports transparency on images like GIF.

I chopped up your code a little but it does work for me. Maybe there is a problem with how you have set up your code. Your label also has a button in it. I don't think you need to have both. You can just created the button where you want it.

Just for reference I created a Label and a Button packed on different sides with a black background to show the transparency of the image.

Here is the code I used to test a gif I have that has transparency. I tested this on both python 3.6 and 2.7 just in case.

from tkinter import *

root = Tk()

def quitApp():
    root.destroy()

background_img = PhotoImage(file="Colors/sa.gif")
scanBtn_img = PhotoImage(file="Colors/sa.gif")

background = Label(root,bg='black', image = background_img).pack(side = RIGHT)               
quitButton = Button(bg='black', image=scanBtn_img, command = quitApp).pack(side = LEFT)
backgroundimage = background_img # keep a reference!

root.mainloop()

Update: I used the gif you link in the comment

Here is the result.

Update:

After doing some more digging I found what might work for Mac OS:

I don't have a Mac to test on right now so let me know if this works for you:

from tkinter import *

root = Tk()

# Hide the root window drag bar and close button
root.overrideredirect(True)
# Make the root window always on top
root.wm_attributes("-topmost", True)
# Make the window content area transparent
root.wm_attributes("-transparent", True)
# Set the root window background color to a transparent color
root.config(bg='systemTransparent')

def quitApp():
    root.destroy()

background_img = PhotoImage(file="Colors/1.gif")
scanBtn_img = PhotoImage(file="Colors/1.gif")


background = Label(root,bg='black', image = background_img)
background.pack(side = RIGHT)
background.config(bg='systemTransparent')
quitButton = Button(bg='black', image=scanBtn_img, command = quitApp)
quitButton.pack(side = LEFT)
quitButton.config(bg='systemTransparent')
backgroundimage = background_img # keep a reference!

root.mainloop()

python - Tkinter - Button Image Transparent Background

1 Answers