Using Python with CustomTkinter and having problems for labels

I'm trying to change the background of the label that its says "Welcome Back to Our Website!"

that specific module doesn't support bgcolor transparent, there is any way that I >>can remove that black background for the label and just left it with transparent

The problem can be fixed.

The Customtkinter widgets can function with transparency.

Install py -m pip install pywinstyles. Released: Apr 22, 2024.

• Include the line pywinstyles.set_opacity(label, value=0.5, color="#000001")
• Insert the keyword within the Label.configure widget as fg_color="#000001" and text_color="blue".

Snippet:

import customtkinter as ctk
import pywinstyles
from PIL import Image, ImageTk

def update_background(event):
    # Get the current window size
    width = event.width
    height = event.height
    
    # Resize the background image
    bg_image_resized = bg_image.resize((width, height))
    bg_photo = ImageTk.PhotoImage(bg_image_resized)
    
    # Update the background image in the Label
    background_label.configure(image=bg_photo)
    background_label.image = bg_photo  # Keep a reference to the image

# Initialize window
ctk.set_appearance_mode("System")
ctk.set_default_color_theme("blue")

app = ctk.CTk()
app.title("Responsive Window")
app.geometry("600x400")

# Local image path
image_path = r"p2.png"  # Make sure to use 'r' for paths in Windows

# Load the original image
bg_image = Image.open(image_path)

# Create a Frame with the background image
bg_image_resized = bg_image.resize((600, 400))  # Initially adjust the size of the image
bg_photo = ImageTk.PhotoImage(bg_image_resized)

background_frame = ctk.CTkFrame(app)
background_frame.place(x=0, y=0, relwidth=1, relheight=1)

background_label = ctk.CTkLabel(background_frame, image=bg_photo, text="")
background_label.place(x=0, y=0, relwidth=1, relheight=1)

# Add a responsive button
button = ctk.CTkButton(app, text="click me")
button.place(relx=0.5, rely=0.5, anchor="center")

# Adjust the position of the Label to be lower
label = ctk.CTkLabel(app, text="Welcome Back to Our Website!" )
label.place(relx=0.5, rely=0.4, anchor="center")  

# The Label should have no background
label.configure(fg_color="#000001", text_color="blue" ) #Alter hue to fit.

# Bind the resize event to update the background
app.bind("<Configure>", update_background)

pywinstyles.set_opacity(label, value=0.5, color="#000001") # just add this line

# Run the main loop
app.mainloop()

Screenshot:

To create text without a background, you can use a canvas instead of a frame. You can also add other widgets, such as a button, to the canvas.

import customtkinter as ctk
from PIL import Image, ImageTk


global bg_photo # reference to keep image created in function


def update_background(event):
    global bg_photo

    width = event.width
    height = event.height
    
    bg_image_resized = bg_image.resize((width, height))
    bg_photo = ImageTk.PhotoImage(bg_image_resized)
    
    # Update the background image
    canvas.itemconfigure(canvas_image_id, image=bg_photo)
    # adjust the position of canvas items
    canvas.coords(canvas_text_id, int(canvas.winfo_width()/2), int(canvas.winfo_height()/3))
    canvas.coords(canvas_button_id, int(canvas.winfo_width()/2), int(canvas.winfo_height()/2))


# Initialize window
ctk.set_appearance_mode("System")
ctk.set_default_color_theme("blue")

app = ctk.CTk()
app.title("Responsive Window")
app.geometry("600x400")
app.minsize(600, 400)

app.grid_rowconfigure(0, weight=1)
app.grid_columnconfigure(0, weight=1)

# Local image path
image_path = r"cat.png"  # Make sure to use 'r' for paths in Windows

# Load the original image
bg_image = Image.open(image_path)

# Create a canvas with the background image
bg_image_resized = bg_image.resize((600, 400))  # Initially adjust the size of the image
bg_photo = ImageTk.PhotoImage(bg_image_resized)

canvas = ctk.CTkCanvas(app, highlightthickness=0)
canvas.grid(row=0, column=0, sticky="nsew")

canvas_image_id = canvas.create_image(0, 0, image=bg_photo, anchor="nw")
canvas_text_id = canvas.create_text(0, 0, text="Welcome Back to Our Website!", fill="white")
button = ctk.CTkButton(app, text="click me")
canvas_button_id = canvas.create_window(0, 0, window=button)

# Bind the resize event to update the background
# app.grid_*configure and sticky="nsew" trigger "<Configure>" event
canvas.bind("<Configure>", update_background)

# Run the main loop
app.mainloop()