VScode custom background image

Use VScode to customize the background image and personalize the interface for writing code.
The effect is as follows:

There are two ways to customize the background image, one is to install an extension plug-in, and the other is to modify the css configuration file.
To install the extension, search for: background in the market and use it according to the instructions.
Here we introduce how to modify the CSS configuration file and set your background image.

Enter the installation directory of VScode, as shown below. [...]Each person's path is different, but the following are the same. Find your VScode installation directory:
[...]\Microsoft VS Code\resources\app\out\vs\workbench\workbench.desktop.main.css

After opening this workbench.desktop.main.cssfile, add the following code at the end,

body {
    pointer-events: auto !important;
    background-size: 100% !important;
    opacity: 0.8 !important;                              /* 这里是图片透明度，根据图片颜色和需要调整，保证不影响写代码*/
    background-position: 0 0 !important;
    background-image: url("bgp/77.jpg") !important;         /*这行是你的图片地址，将引号中的路径替换即可*/
    content: "Hello World!";
    position: absolute;
    z-index: 999;
    width: 100%;
    background-repeat: no-repeat;
}

Just start a new line and insert it, like this:

It seems that using absolute addresses for image addresses does not work. It is recommended to use relative paths here .
I workbench.desktop.main.csscreated a new bgpfolder in the directory where the file is located and stored 77.jpgthe picture named so my relative path is "bgp/77.jpg".