Up next in 10
How to Change VSCode IDE Wallpaper & Set Custom Image as Background in Editor & Terminal
Jul 3, 2025
Get the full source code of application here:
Show More Show Less View Video Transcript
0:00
Uh hello guys, welcome to this video. So
0:02
in this video, I'll show you how to set
0:05
a background image or a background
0:07
wallpaper or GIF animation inside your
0:09
VS code uh code editor. uh we have
0:13
different section you can see inside the
0:15
sidebar section we are having a
0:16
background GIF which is playing uh
0:18
infinite number of time and in the
0:20
actual code environment I basically put
0:23
a wallpaper image as a background and
0:26
also in the terminal you can even
0:27
customize it and actually display a GIF
0:31
animation in the background while you
0:34
put your commands. So there is this
0:37
extension right here. You need to
0:39
install this extension. Uh just type go
0:41
to the extensions tab and just type here
0:44
background and this extension will come
0:46
right here. You will see this is
0:48
developed by this Sheldy person and uh
0:51
it's almost having 876,000
0:54
installs and I've already installed it.
0:58
So if you're doing it for the very first
1:00
time, you click the install button and
1:03
once it is installed, you go to the user
1:06
setting file here. The shortcut key is
1:08
control shiftp. So open the command
1:11
pallet and simply open your user
1:13
settings JSON file.
1:16
And right here you need to enable
1:20
whatever background. I basically pasted
1:22
all this code which is required for
1:24
this. You can check the description of
1:26
this video after installing this
1:28
extension. Just make sure that you go to
1:30
that and simply paste the code. Now let
1:34
me just walk you through what these each
1:36
parameter has
1:38
mean by that. So the very first thing we
1:40
need to do, we need to enable this
1:42
extension. For enabling this, we need to
1:45
simply set a property right here which
1:47
is background denabled.
1:50
So in double quotes you simply write
1:52
here background dot enabled and you need
1:55
to set this option to a boolean
1:57
parameter. So true. Now this will set
2:00
this extension and after that here it
2:03
has three sides here. The sidebar side
2:06
the actual editor side.
2:09
So inside the sidebar as soon as you do
2:11
this you have various properties here
2:14
and this contains a object right here.
2:17
So inside the object here we have the
2:20
property of uh use front property.
2:24
This is a boolean parameter. I will set
2:26
it to true. And after that whatever
2:29
images that you want to display. So in
2:32
this case I will be displaying a simple
2:34
GIF animation in the sidebar section in
2:36
the background. So as soon as you make
2:38
the changes it will give you this
2:40
notification that the file has been
2:42
changed. Simply click update and
2:44
restart. As soon as you do this, you
2:46
will see the sidebar section will
2:49
contain this GIF animation playing. And
2:52
uh similarly, we will do the thing for
2:55
our actual editor. And just put a comma
2:58
right here. And
3:03
background dot
3:05
editor.
3:09
And this will also be a simple object.
3:19
So here again you
3:23
me just paste it. You can check the
3:26
description link and simply paste this.
3:31
And now the important thing is that
3:33
whatever local image file that you want
3:35
to use simply open that image in the
3:37
browser.
3:39
So to get the path. So let's suppose I
3:42
want to set this image as the
3:44
background.
3:46
So what you need to do you open this
3:49
image in the browser to get the full
3:51
path.
3:53
So just open this image and you will get
3:56
this full path here and simply copy this
3:58
path and simply paste it right here in
4:01
the images array. After pasting it, just
4:04
restart VS code and after restarting it,
4:07
you will see the image will be set as a
4:09
background or as a wallpaper inside your
4:13
editor.
4:15
So in this easy way you can set any
4:17
image and similarly in the terminal as
4:19
well we need to show a GIF animation.
4:23
So again this will be the third property
4:26
here. So after that I will paste it. So
4:29
here we are using a simple GIF animation
4:32
from the internet. You can simply paste
4:35
the full link and it will actually
4:37
display that GIF animation. If you now
4:39
open the terminal right here.
4:47
So now you can see the GIF animation is
4:49
playing as the background in the
4:50
terminal as well. So in this easy way
4:52
you can use this extension to customize
4:54
and set a wallpaper
4:57
and as a background image for your VS
4:59
code environment for different sections
5:01
the sidebar the actual editor and then
5:04
also the terminal as well. So you can
5:06
use this extension just enable it and
5:08
start using it. Please hit that like
5:10
button, subscribe the channel and also
5:12
check out my website freemediattools.com
5:15
uh which contains thousands of tools.
#Computers & Electronics
#Software