How to Change the Background Image in Visual Studio Code

A while ago I posted a screenshot of some code on our favourite code editor (Visual Studio Code) and then I got a few friends asking how I changed the background image. I figured it would be nice to write this post. Visual Studio Code (VSCode) is a fantastic code editor and it allows you to customize many aspects of the interface to suit your preferences.

Enough with the long talk, let’s get to the point. How can we change your background image on VSCode, right? Here, let’s get started:

1. Install the background plugin

Open the Extensions pane and search for the background plugin, install and enable the plugin. Or execute the following command

ext install background

2. Go to the Settings editor(JSON)

To change the background image in VS Code, you’ll need to go to the Settings editor. There are a few ways to do this:

• Press Ctrl + , on your keyboard (or Cmd + , on a Mac) and click on the Edit in settings.json button.
• Click on the gear icon in the bottom left corner of the VS Code window and click on the Edit in settings.json button.
• Go to Code/File > Preferences > Settings in the top menu and click on the Edit in settings.json button.
• Run Cmd/Ctrl + Shift + P and select The Open Settings (JSON) command.

3. Customize the background image

If you don’t like any of the predefined configurations, you can also customize the background yourself. To do this, you just need to update the background section of the settings.json file with the following example;

{
  "background.fullscreen": {
    "image": "https://pathtoimage.png", // url of your image
    // "image": ["https://pathtoimage.png"], // An array may be useful when set interval for carousel
    "opacity": 0.91, // 0.85 ~ 0.95 recommended
    "size": "cover", // also css, `cover` to self-adaption (recommended)，or `contain`、`200px 200px`
    "position": "center", // alias to `background-position`, default `center`
    "interval": 0 // seconds of interval for carousel, default `0` to disabled.
  }
}

Other examples are;

• disable the extension

{
  "background.enabled": false
}

• custom images

{
  "background.useDefault": false,
  "background.customImages": ["https://a.com/b.png", "file:///Users/somepath/a.jpg"]
}

• custom style — opacity

{
  "background.style": {
    "opacity": 0.6
  }
}

• custom style — image size

{
  "background.style": {
    "background-size": "300px 460px"
  }
}

• fullscreen

{
  "background.fullscreen": {
    "image": "https://pathtoimage.png", // url of your image
    // "image": ["https://pathtoimage.png"], // An array may be useful when set interval for carousel
    "opacity": 0.91, // 0.85 ~ 0.95 recommended
    "size": "cover", // also css, `cover` to self-adaption (recommended)，or `contain`、`200px 200px`
    "position": "center", // alias to `background-position`, default `center`
    "interval": 0 // seconds of interval for carousel, default `0` to disabled.
  }
}

Here is what your final result should look like,

Side Notes

• This extension works by editing the VSCode’s CSS file, so a warning appears the first time update the background. U can click the [never show again] to avoid it.
• If you see an error looking like this EROFS: read-only file system, access . It’s a Macbook thing and is probably related to the installation of VSCode. Delete the application completely. Download and extract a new VSCode. Move that to “Application” from “Downloads”.

I hope this helps! Let me know if you have any questions or need further clarification on any of the steps mentioned above.