Transparent Backgrounds on Buttons in Tkinter

Question

I have a Button with a button image but when it is in my window the background of the button clashes with the background of the window. It is a .png image but tkinter seems to want to keep the image as a quadrilateral by adding grey space. Is there a way to make the empty space of a button become transparent so that you are just left with the button image?

I am using Python 3.4.2 on Windows 8.

This could well be a `.png` image issue. Try changing it to `.gif` (which supports transparent backgrounds) first, and let me know if it doesn't work. — Matthew, Apr 24 '15 at 21:29
PNG supports transparent backgrounds, and a `.png` imported into `tkinter` from `PIL` preserves transparency. — TigerhawkT3, Apr 24 '15 at 21:35
Nope, I have changed the file to a gif but the same thing is happening. — Mitra0000, Apr 24 '15 at 21:36
I have found a semi-useful page. It outlines how to make a transparent background on a label but unfortunately this method doesn't work with a button. Here is the link: http://stackoverflow.com/questions/19080499/transparent-background-in-a-tkinter-window?rq=1 — Mitra0000, Apr 24 '15 at 21:47
I think the issue might be that, while the image is transparent, the `Button` itself is not, so the grey you're seeing is the `Button` behind the image. — TigerhawkT3, Apr 24 '15 at 22:01

score 3 · Answer 1 · answered Nov 18 '21 at 18:25

To create an image that supports .png transparency, you have to create a Canvas and then create an image object using the canvas .create_image() feature. Then bind an event to the canvas image using .tag_bind().

For example:

import tkinter as tk
from PIL import Image, ImageTk

def quitGame(event):
    window.destroy()

window = tk.Tk()
window.geometry("500x500")

canvas = tk.Canvas(window, width = 300, height = 300)
canvas.pack()

#creating background
bgImage = ImageTk.PhotoImage(Image.open("Images/background.png")) 
bg = canvas.create_image(0, 0, image=bgImage, anchor=tk.NW)

#creating button which supports png transparency
quitImage = ImageTk.PhotoImage(Image.open("Images/quitImage.png"))
quitButton = canvas.create_image(50, 50, image=quitImage)
canvas.tag_bind(quitButton, "<Button-1>", quitGame)

window.mainloop()

There's really no need to use the PIL to do this because `tkinter.PhotoImage` can read `.png` as well as `.gif`, `.pgm`, and `.ppm` formatted files. See [my answer](https://stackoverflow.com/a/71011331/355230) to a related post which illustrates this (but is otherwise based on yours). — martineau, Feb 08 '22 at 21:31

score 1 · Answer 2 · edited Feb 06 '22 at 17:02

The solution is a bit tricky as you need to go around using PIL but works. Just solved it after 2h of fighting.

You need to use PIL as an image loader and then pass the image to tkinter BUT with the usage of the root (main tk.Tk() class object) - without that the image won't be visible as it's gone in the garbage collector, only image's space remains. Simplified code below:

import tkinter as tk
from PIL import Image, ImageTk

root = tk.Tk()

button = tk.Button(self.left_menu)
button_load = Image.open('assets/search.png')
root.button_img = ImageTk.PhotoImage(button_load)
button.config(image=root.button_img)

button_1.pack(side='top')

I don't see this as addressing the OP's question **at all**. — martineau, Feb 06 '22 at 17:13

score 0 · Answer 3 · edited May 23 '17 at 12:19

0

If you are using a .png with import PIL python is supporting the transparency.

However, within tkinter the .Button widget does not support transparency.

So what you will have is transparent image on top of a solid background.

If you are a windows user, your best bet is this solution:

Transparent background in a Tkinter window

edited May 23 '17 at 12:19

Community

1
1

answered Sep 15 '16 at 11:22

D'Arcy

383
1
4
11

score 0 · Answer 4 · answered Apr 11 '23 at 20:35

I had same issue that led me here. See image below. I thought my .png transparency was not working, but the png transparency was fine. The grey space I was seeing was the button background. By making the button background the same as the frame background, I got this desired result for the button.

The only change to code I made was adding bg=bg_menubox to the button creation as shown below. bg_menubox is the blue color seen in the background of the menubox frame where the button is created. Top part of image is without the bg=bg_menubox, the lower example is with.

Here's the relevant line of code:

btn_open = tk.Button(menuframe,image=image_open, command=open_midi, bg = bg_menubox)

Transparent Backgrounds on Buttons in Tkinter

4 Answers4

Linked