How to Dynamically Resize Background Images – Tkinter

You might surely be worried about how to resize your background image with the change in screen size.  In this article, We are creating an advanced-level GUI application using the Tkinter module using Python in which you need to resize the app window various times and dynamically resize background images.

Modules Required:

Tkinter: As the GUI application is created in Python, then you surely need the Tkinter module. It is one of the easiest and fastest ways of creating GUI applications. You can download the module Tkinter using the following command:

 pip install tkinter

Pillow: The module which uses histograms to extract some statistical data out of images is known as the Pillow module. The pillow module can be installed using the following command:

pip install pillow

Stepwise Implementation:

Step 1: First of all, import the library Tkinter, PIL.Image and PIL.ImageTk.

Python3

from tkinter import *
import PIL.Image as im
import PIL.ImageTk as imtk

Step 2: Now, create a GUI app using Tkinter, set the dimensions, and give a title to the app.

Python3

gui_app = Tk()
gui_app.title(“  # Title you want to assign to app”)
gui_app.geometry("#Dimensions of the app")

Step 3: Then, define the image using the PhotoImage function. As the image cannot be directly passed to the argument, thus PhotoImage() function is used which returns the image object.

Python3

background_image = imtk.PhotoImage(file=
                         "# Path of the image")

Step 5: Further, create and display the canvas in the GUI app. display the image imported in step 3 in the canvas.

Python3

# Create and display the Canvas
canvas_widget = Canvas(gui_app, width=800, height=500)
canvas_widget.pack(fill="both", expand=True)

# Displaying the image inside canvas
canvas_widget.create_image(0, 0,
                           image=background_image,
                           anchor="nw")

Step 7: Now, create a function to resize all the images in the program using resize() function. Here, we have used the Image.ANTIALIAS, which will maintain the quality of the image when it is made compact or huge.

Python3

def resize_image(e, updated_background_image):
    resized_background_image = updated_background_image.resize(
        (e.width, e.height), im.ANTIALIAS)
    return resized_background_image

Step 8: In this step, we will create a function to display any other widget we want on the app. Here we have written text on the app.

Python3

# Create a function to resize all the images
def resize_image(e, updated_background_image):

    # Resize Image using resize function
    resized_background_image = updated_background_image.resize(
        (e.width, e.height), im.ANTIALIAS)
    return resized_background_image

Step 9: Moreover, create a function resizer with the argument e that will resize the background image size according to the app screen size.

def background_image(e):

• Step 9.1: In the function created, define some global variables.

global updated_background_image, resized_background_image, new_background_image

• Step 9.2: Then, open and identify the image using Image.open() function with the argument as the path of the image.

updated_background_image=im.open("#Path of image")

• Step 9.3: In this step, we will call the resize_image function to resize the image by maintaining the quality of the image.

resized_background_image=resize_image(e,updated_background_image)

• Step 9.4: Further, define the new image created in the previous step using the PhotoImage() function.

new_background_image=imtk.PhotoImage(resized_background_image)

• Step 9.5: Now, we will display the newly created image in the previous step on the canvas.

canvas_widget.create_image(0,0,image=new_background_image,anchor="nw")

• Step 9.6: Later on, we call a function display_widgets to display any widgets on the background image.

display_widgets()

Step 10: Here, we have bound the function created in step 7 with the <Configure>, which will resize the size of a background image with the size of the app.

gui_app.bind('<Configure>',background_image)

Step 11: Finally, make the loop for displaying the GUI app on the screen.

gui_app.mainloop()

Dynamically Resize Image

In this example, we have used the image (link) that we have inserted as a background image. Now, whenever we resize the GUI app, the background image also gets resized according to it. For resizing the background image with the GUI app, we have created the class Resize, in which we have defined the constructor for getting the image and binding to function for resizing the image. Also, we have defined a function that resizes the image and displays the new image on the app.

Python3

# Import the libraries
from tkinter import *
from PIL import Image, ImageTk

app = Tk()

app.title("Resize Background Images")
app.geometry("500x500")

class Resize(Frame):

    # Defining the constructor in the class
    def __init__(self, master):

        # Calling constructor for method frame
        Frame.__init__(self, master)

        # Open and identify the image
        self.image = Image.open("img_2.png")

        # Create a copy of the image and store in variable
        self.img_copy = self.image.copy()

        # Define image using PhotoImage function
        self.background_image = ImageTk.
        PhotoImage(self.image)

        # Create and display the label with the image
        self.background = Label(self, image=self.
                                background_image)
        self.background.pack(fill=BOTH,
                             expand=YES)

        # Bind function resize_background to screen resize
        self.background.bind('<Configure>',
                             self.resize_background)

    # Create a function to resize background image
    def resize_background(self, event):

        # Get the new width and height for image
        new_width = event.width
        new_height = event.height

        # Resize the image according to new dimensions
        self.image = self.img_copy.resize
                    ((new_width, new_height))

        # Define new image using PhotoImage function
        self.background_image = ImageTk.
        PhotoImage(self.image)

        # Change image in the label
        self.background.configure(image=self.
                                  background_image)

# Call the class components
# and display it on app
e = Resize(app)
e.pack(fill=BOTH, expand=YES)

# Create an infinite loop for
# displaying app on screen
app.mainloop()

Output:

Dynamically Resize with one Fixed Image

In this example, we have used the image (link) that we have inserted as a background image. Now, whenever we resize the GUI app, the background image also gets resized according to it. For resizing the background image with the GUI app, we have created the image_background function with argument e, resize_image function, and display_widgets function respectively. The resize_image and display_widgets functions will be called by the image_background function bound. Further, we have bound the image_background function with <Configure>. 

Python3

# Import the libraries tkinter, PIL and PIL.Image
#from PIL import ImageTk
from tkinter import *
import PIL.Image as im
import PIL.ImageTk as imtk

# Create a GUI gui_app
gui_app = Tk()

# Set the title and geometry to your gui_app
gui_app.title("Resize Image Dynamically")
gui_app.geometry("500x500")

# Define Image using PhotoImage function
background_image = imtk.PhotoImage(file="gfg.png")

# Create and display the Canvas
canvas_widget = Canvas(gui_app, width=800, height=500)
canvas_widget.pack(fill="both", expand=True)

# Displaying the image inside canvas
canvas_widget.create_image(0, 0, image=background_image, anchor="nw")

# Create a function to resize all the images


def resize_image(e, updated_background_image):

    # Resize Image using resize function
    resized_background_image = updated_background_image.resize(
        (e.width, e.height), im.ANTIALIAS)
    return resized_background_image

# Create a function to display other widgets on background


def display_widgets():

    # Write some text on the image
    canvas_widget.create_text(300, 30, text="Welcome to Geeks For Geeks", font=(
        'Helvetica', '30', 'bold'), fill='white')

# Create resize function with argument e


def image_background(e):

    # Define updated_background_image, resized_background_image, new_background_image globally
    global updated_background_image, resized_background_image, new_background_image

    # Open and identify the image
    updated_background_image = im.open("gfg.png")

    # Call the resize_image function
    resized_background_image = resize_image(e, updated_background_image)

    # Define resized image again using PhotoImage function
    new_background_image = imtk.PhotoImage(resized_background_image)

    # Display the newly created image in canvas
    canvas_widget.create_image(0, 0, image=new_background_image, anchor="nw")
    display_widgets()


# Get parameters of resizing window and
# bind python function resizer to screen resize
gui_app.bind('<Configure>', image_background)

# Make the infinite loop for displaying the gui_app
gui_app.mainloop()

Output: