0

In my python program I have a title image, however it's png background is displaying as white.

image

My code for my images is as followed:

from tkinter import *
from typing import final
import requests
from PIL import ImageTk, Image

root = Tk()

# get system display settings
screen_width = root.winfo_screenwidth()
screen_height = root.winfo_screenheight()

path = 'C:/Users/Sam/Desktop/Clash Clan Manager/Graphics Based Program/Game Graphics/'

root.title("Clash Clan Manager")
root.iconbitmap(path + 'CCM logo circle.ico')
root.geometry(str(screen_width) + 'x' + str(screen_height-70))

# display title
titleImage= ImageTk.PhotoImage(Image.open(path + 'clash clan manager text.png'))
titleCanvas= Canvas(root, width= 1374, height= 396)
titleCanvas.pack()

titleCanvas.create_image(10,10,anchor=NW,image=titleImage)

# display background image
background = ImageTk.PhotoImage(Image.open(path + 'background image.png'))
backgroundCanvas = Canvas(root, width=screen_width, height = screen_height-70)
backgroundCanvas.pack()

backgroundCanvas.create_image(10,10, anchor=NW, image =background)

root.mainloop(0)

How would I go about making the title transparent?

Sam Leighton
  • 15
  • 1
  • 6

1 Answers1

0

You can use Canvas like this:

img= ImageTk.PhotoImage(Image.open(path + 'background image.png'))

canvas= Canvas(root, width= 600, height= 400)
canvas.pack()

#Add image to the Canvas Items
canvas.create_image(0,0,anchor=NW,image=img)

We are just creating Canvas canvas in variable and adding image img in it.

Edit: According to OP code:

titleImage= ImageTk.PhotoImage(Image.open(path + 'clash clan manager text.png'))
background = ImageTk.PhotoImage(Image.open(path + 'background image.png'))

canvas= Canvas(root, width= 600, height= 400)
canvas.pack()

canvas.create_image(0,0, image =titleImage)
canvas.create_image(0,<change position according to title image size or 0 if you want to put title in background image>, image =background)

We are putting titleImage first and background as last.

My output: image

imxitiz
  • 3,920
  • 3
  • 9
  • 33
  • Thanks a lot, that works! If you don't mind could you quickly explain what the "10", and the "anchor" parts are in the create image function? – Sam Leighton Jul 24 '21 at 17:27
  • Also I just realised, it still doesn't make the image transparent :( – Sam Leighton Jul 24 '21 at 17:29
  • Those 10s are position of image. Mean where image should be put. You can use 0,0 insted of 19. First 10 is for x-axis and second for y-axis. And Anchors are used to define where image is positioned relative to a reference point. There NW mean North West – imxitiz Jul 24 '21 at 17:30
  • Thank you. Do you know why it isn't transparent or? – Sam Leighton Jul 24 '21 at 17:35
  • @SamLeighton Please provide what you are getting and what is your expected output. Attach that title and background image as well. – imxitiz Jul 24 '21 at 17:42
  • I'm getting the exact same output as in my original post. Both images are showing, but the title image still has a white background, despite using your code and changing it to a canvas.. All I want is for that background to be transparent. I can assure you the image is a correctly formated as a png – Sam Leighton Jul 24 '21 at 17:44
  • @SamLeighton Now, I am not sure if you have transparent background image. Try [this](https://clipartcraft.com/images/transparent-circle-glowing-5.png) and [this](https://www.pngarts.com/files/2/Download-Button-Transparent-Background-PNG.png) images. – imxitiz Jul 24 '21 at 17:50
  • Just used your image and still broken. Would it help if I sent you the rest of my code? – Sam Leighton Jul 24 '21 at 17:52
  • Yeah! I think and if possible, expected output as well, as I have already told you. – imxitiz Jul 24 '21 at 17:53
  • Hold up, I think I've found the issue. It's not overlaying the two images, just putting the title on top of the background. The expected output is for the title image to be on top of the background. – Sam Leighton Jul 24 '21 at 17:56
  • I haven't seen any of your code, so I don't have any idea, is your problem solved now? – imxitiz Jul 24 '21 at 17:58
  • I've edited my question to include all my code in the entire project – Sam Leighton Jul 24 '21 at 18:01
  • @SamLeighton No, you don't need to provide entire project but only helpful part only and I have also edited my answer. – imxitiz Jul 24 '21 at 18:05
  • I changed my code so instead of .pack() I'm using .place() My image now looks like this: https://imgur.com/a/pdl8HzL So it's perfect, apart from the fact it's not transparent. Lol this is gonna kill me. I also tried with your image, still not transparent – Sam Leighton Jul 24 '21 at 18:11
  • Provide your title and background image, now I have to test on my own. Because it is working perfectly fine for me. – imxitiz Jul 24 '21 at 18:12
  • https://imgur.com/a/U7B3CeE - title. https://imgur.com/a/Xg43wv4 - background – Sam Leighton Jul 24 '21 at 18:13
  • Isn't that what you want? @SamLeighton answer edited! It is working perfectly fine for me. – imxitiz Jul 24 '21 at 18:23
  • Yeah that looks right, I don't know why I can't replicate it. Would you mind sending the code directly from your project (ofc only the relevant parts) – Sam Leighton Jul 24 '21 at 18:27
  • https://pastebin.com/RunB3puu – imxitiz Jul 24 '21 at 18:30
  • 1
    I think it must've been the order in which my code was in, I'm not actually sure. I just re-ordered it like yours and it fixed it. – Sam Leighton Jul 24 '21 at 18:42