Python Background Image: How to Add a Background Image to Your Python Tkinter GUI

hey guys look at my app I have got an image added to my app and it looks quite stunning so how do you add a background image to python tick into GUI or your graphical user interface how can I add that what is the simplest way I'm going to teach you in this video [Music] all right before we get started with the code let's have a look on the app the app has got multiple components one is the background image next there's a label that I've created with a specific font and the font size and also there's a name on the top and the entire app is coming on a fixed width and height right so how do I design it please have a look of this app then we will start coding so let me close this and let's get started now the very first thing we need is the proper Library which would help us to create this app the library name is t Kinto stands for toolkit and interface interface transfer graphical user all right now I also need because I have to have a background image added so I would specifically mention our class called photo image okay so this is very important photo image is a class which I'll be using to add a background image all right let's get started with the app the very first thing is creating the app app window the background window for that take any variable here I will be naming it as root the name of the variable is root equals to and I'm going to use the library name which is take into Dot I would use the toolkit toolkit is a class from t kingdom see the moment I do this and then if I write root dot I'll put the entire thing in a loop so that the app stays it will not close when the code runs so for example if you run this four lines of code what is happening you got a small window so it is in the loop the window has been created this creates the window line number three and the window is created in front of you everything is fine the next point is I need to have a title to the app so how do you give a title to the app it's quite simple all you have to do is simply write root the name of the window root dot then I have to give a title so simply use this title function and within the parenthesis when function comes it goes with the parenthesis remember this so within the parenthesis I am going to say my app good enough so let's run again and let's see if the title is appearing or not so if you see on this app the title is appearing but again the app is opening up in a very small window I would like it to open in a fixed size window the moment I run it so let's do that for this I would be adding another line of code where I would say root dot geometry I am going to set the geometry of the app the first thing the width what should be the width the width let me keep it as 500 say X or you know the X symbol and then I'm putting 600 is the height so 500 pixels by 600 pixels this is width and this is the other one is height so if I run this now look at the app how it has opened it has opened with a fixed size okay great now the next thing I would like to do is add a background image now your image might be there in your computer somewhere so I have to have the image path so let me create a variable saying image underscore path so all these variables you can give any name of your choice but I would keep it pretty simple image underscore path now let's look at the image on my computer here is the location where I have the image I am going to right click on this image and hit on the shift key hold the shift key and you would get this option copy as path so let's get this go to pycharm and here I am going to because it's a image path so how do you put a image back can you simply write like this no it won't work because you are developing an app it won't work like this so for this if you remember the in the second line we have imported something called photo image so this photo image class will be used to store the path of your image file so let's use it so simply type photo image and within the parenthesis I'm going to pass the file so for this I'll be using the parameter called file equals to and I'm going to copy paste that file bar pretty simple now there is a problem if you write like this if you have a forward slash like this you know the forward slashes are used in Python let's see if I say print in new line so use slash n so this will become a problem so to avoid this problem I have to write a string called r r means regular so this parenthesis the forward slash will become regular so it will be not throwing any kind of error if you simply write okay so now what we have got we have got the image path which remembers where my image is there simple Okay so until now if you run it nothing is going to happen apart from the geometry that we have seen it is opening in 500 with 600 height okay by default that's all and there is a title but still the background image has not come so how do I get the background image let me create a variable called background dot underscore image now how do I put this image into background for that I will use the peak into Library dot there is something called label so you have heard about this label now you will say Rakesh this is image so why you are using label so remember even the image can be placed using label dot label you can create a label also you can place an image so how to do that let me show you first of all this background image has to be kept inside the root inside your main window okay after writing root you have to use a parameter called image do you see this parameter called image equals to the variable that you have created for the image is path so now what is happening this line gives an understanding to the code saying the image is available in this specific path so we are passing through the parameter and the new background image that we are going to create as a label has to be placed in the root after this you have to write a very important line that is your using the variable that you have created background image dot then you have to write something called pack now what would happen by writing pack generally for a label we write a pack this is let me show you what is happening if I run this now the background image has come but you know the background image has come but this is not nor let's say you already have some label prior to this what would happen the next label I am going to add using the pack method it will be added below it for example let me show you let us add a label okay for example I'll create a text label text underscore label equals to and I'm going to use Peak into Dot label and then it has to be kept inside the root comma and the text I would like to pass let's say welcome to my app okay this is the text I would like to have now what would happen if I use pack you need to First understand the difference between pack and there is another method called place okay I will show you that now here if I write the text underscore label variable Dot pack so what's going to happen what is the problem with this code let me show you if I run this code what is happening what is the label where your label has gone look at it the label is somewhere hidden below and it you cannot even see it properly right it is gone now for example um if I remove this let's take this specific part and keep it at the top okay now let me run it so what is happening you can see the label has come on the top and then the image is coming let's say if you keep on adding few more labels like this let's say I'm adding three labels now if I'm going to run it again so what is happening your labels it is not acting as a background image it is acting like a label so it is going down and down right based on the code so this is not the proper way so that's why I told you this is not the proper way so what is the proper way the first thing is let me do Ctrl Z the very first thing is you have to have the image at the first line of your code so image has to be your first line of code okay then rest of the things that you would like to put and the next point is you cannot use a pack here okay you cannot use a pack rather you have to use another function called place so what are the difference between place and pack you will see it now let me run it now what is happening see the image the image still did not appear because this place function takes few important parameters what are those parameter there is something called relative height and width this is one of the parameter if I say relative height is equal to 1 comma I will explain this okay what is relative height and what is relative width if I'm placing one so what would happen if I run it now look at it the difference that's going to happen so the very first thing if you see the label that we have got is still there it did not push the image to the down like last time so it acted like a background image because we have used place and then the label has come on top of it now there is a lot of beautifications required to this what are this now first let's understand what is the meaning of this relative height 1 and width one consider this one as hundred percent for example if I'm going to keep 0.5 that means 50 height what would happen if I run it see what happened the image height has stayed at the 50 of the app height so it has taken only fifty percent getting it so height means this is the height and this is the width so it has taken only fifty percent let's say if I'm going to make it 30 percent so I will write 0.3 and if I run it it will only occupy 30 of the height do you see getting it similar way similar way if I'm let's make it 100 height and let's say the width is 100 now one means hundred percent that's why I want to make it 0.5 and if I run it you will see because this is a width so it has taken only the 50 width getting it if I expand it it has taken only 50 width the image has taken only 50 width so that is the meaning of relative height and relative weight because we have to keep it full I will simply say one getting it just by writing one it will take 100 height 100 width and maximum to the size of the image even the image has some limitation the image which I have downloaded you know it has a small pixel so it is maximum it can be expanded to this width so that's why you can see a bit of Gap here but if you get the proper image it will it can fill the entire 100 of the app all right so this is understood now the next point is here if you see the label the label did not appear properly because it has to have some font and the size has to grow right it has to be a bigger size so how do I manage to do so is by acting on the line number 12. so what should I do I'll simply put a comma and I'm going to use a parameter called font what is the parameter font parameter now in this font parameter I will pass two different things the first thing I am going to pass what is the font style so I'll say Georgia then I'll put some size let's say Let me give a size called 24. now what would happen just by doing it if you see how nicely now it is looking exactly how we have started this tutorial exactly the same way it has appeared so is it not isn't looking better so you have got a proper header proper title and the image is also acting like a background now rest of the buttons and things you like to design I have already taught in my previous set of videos you can keep on designing your app and once you have designed please do comment right what where you know did you find it interesting just comment if you are done with the exercise simply say done in the comment section leave a comment all right guys so this is the scope of for this video this is the scope to learn how do you add the image to the background and we have learned all the various parameters the important ones is the photo image this is one of the class that you have to import to store the file path of the photo and then this is how you pass it so the method that we have used it Peak into dot label and then this is how we are passing the image path okay and here we will not be using the pack method rather we are using the dot Place dot place and then we have providing the parameters like relative height related with you got an understanding of both these parameters what is the relative width and what is the meaning of this one so thank you guys this is the scope of uh this video we have got an understanding of how to add the image in the background we are going to come up with more and many more interesting topics like this so stay tuned and do not forget to subscribe to my channel so thank you guys for watching your support is very much required please do subscribe to the channel and leave a comment on every video that you are watching simply sit down give it a like and do share with your friends who would like to learn from our Channel thank you again you have a great day [Music] foreign

Channel: Automate with Rakesh

Views: 13,706

Keywords: tkinter background image full screen, tkinter background color, tkinter canvas background image

Id: cTu74xMkolg

Length: 14min 51sec (891 seconds)

Published: Fri Aug 18 2023