Up next in 10
VSCode Tutorial to Customize and Change Background of IDE With Images & GIF Files From URL
Mar 2, 2025
Get the full source code of application here:
Watch My Visual Studio Code IDE Setup Video For Fonts,Themes & Extensions
https://youtu.be/Bon8Pm1gbX8
Hi Join the official discord server to resolve doubts here:
https://discord.gg/cRnjhk6nzW
Visit my Online Free Media Tool Website
https://freemediatools.com/
Buy Premium Scripts and Apps Here:
https://procodestore.com/
Show More Show Less View Video Transcript
0:00
uh hello guys welcome to this video so
0:02
in this video I will show you how to
0:04
change the background of vs code you can
0:07
control the look and appearance of each
0:08
section in the vs code this is actually
0:11
your editor where you write code you can
0:13
actually change the background also your
0:15
terminal background right here you can
0:16
even change that as well and also your
0:19
sidebar as well I will show you an
0:21
extension right here in vs code so just
0:23
go to extensions and just type here
0:27
background and this is actually the
0:29
extension here it's very popular used by
0:31
almost a
0:33
23,000 developers and it actually brings
0:36
background images to your vs code so
0:38
just click the install button uh just
0:40
activate this extension so once
0:43
activated and now you just need to open
0:45
your user settings file so there is a
0:47
shortcut here control shift p and just
0:50
type here user settings
0:53
preferences this is your Json file here
0:56
and here you can control the settings
0:59
here so so let me just show you one one
1:02
by one so there is a setting here which
1:05
is the background
1:07
enabled we just need to set this to
1:10
true so this and it will now it will
1:14
giving me suggestions set the next thing
1:16
is that there is a
1:19
section which you want to control which
1:22
is the
1:24
background sidebar so there is a sidebar
1:27
section so here you can actually
1:31
it supports all these options opacity
1:33
size position interval random and here
1:37
in inside the images section you can
1:39
give any image it can be a GI file as
1:42
well so let me give just a random image
1:45
from the internet and just paste this
1:47
image in double codes here you give the
1:51
URL and after you make the change you
1:53
just need to restart your vs code it's
1:56
giving you this update and restart click
1:58
on this button and after this you will
2:01
see your sidebar you will see this GIF
2:04
animation will appear in the sidebar
2:06
cool little animation and all your icons
2:10
are appearing right here so it is
2:12
putting that animation in the background
2:14
here you can even put a image as well
2:17
you can control all the parameters which
2:20
is using this opacity so we have just
2:23
put the opacity to 0.1 size is cover
2:26
position center so and same we will do
2:30
that with the actual editor where we are
2:32
writing the code here so just put a
2:35
comma and just write here
2:39
background
2:43
editor and here you
2:47
just put the same options
2:51
here all these options are available for
2:54
here also so let me just change the
2:57
opacity to 0.5 and here you can even
3:01
pick images from your local file system
3:03
as well so just I have this image
3:05
appearing
3:06
here so you just need to open this image
3:10
in the
3:12
browser and just copy this path here
3:16
right click copy this path and just here
3:19
paste this path here in double
3:24
codes so automatically it will add this
3:27
path here file you can even put your
3:30
local images as well then just restart
3:32
your vs code and now what happens you
3:34
will see this image appearing you will
3:36
see
3:37
that this is my image here which is
3:42
appearing has a background here so what
3:45
I can do is that I can
3:50
actually if you want to reduce the size
3:53
here let's suppose you can make this
3:56
perfect by tuting uh just changing some
3:58
settings here I don't want to cover this
4:01
so I can remove this
4:02
setting
4:05
position so if you make this change
4:14
here so just close it and just restart
4:18
this so now it will be appearing as a
4:21
small image
4:32
I can just remove all these settings
4:34
just put the opacity to 0.5
4:37
here and just
4:48
restart so you can even put uh GIF
4:51
animations as well uh which is
4:58
uh okay put a image from the internet so
5:03
I will just replace
5:25
it so just change it and now if you see
5:28
the image will be
5:52
replaced so this extension you can
5:55
definitely use guys it's very useful
5:57
extension
6:04
you can put GIF animation in the sidebar
6:06
and you can even
6:08
put your local images you can see that
6:33
so all these properties you can actually
6:35
control
6:39
here if you just want to disable this
6:41
control shift
6:43
p there is a setting
6:46
here if you want to disable the
6:48
background just put you will see the
6:50
background will be
6:57
disabled you can see the back is removed
7:00
and once again if you want to enable
7:09
this so just do
7:25
this so if any sort of error is coming
7:29
in this extension you can definitely
7:32
uninstall and install it once
7:39
again so just click the uninstall button
7:42
and just restart this and install this
7:45
once again so if any sort of error is
7:47
taking place after you install it just
7:50
go to your settings
8:03
so let me
8:05
just paste it
8:40
so in this way guys you can customize
8:42
the look and appearance of vs code by
8:45
this
8:49
extension and thank you very much for
8:51
watching this video and also check out
8:53
my website free mediat tools.com which
8:56
contains thousands of tools regarding
8:59
audio your video and
9:02
image and I will be seeing you in the
9:04
next video
#Online Goodies
#Clip Art & Animated GIFs
#Skins, Themes & Wallpapers
#Other