Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>background featureNew to Visual Studio Code? Get it now.
background feature

background feature

shalldie

|
2,153 installs
| (1) | Free
Please not use this, it's just for testing background's feature! Not for users.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

This repo is for testing! Never to use it!!

This repo is for testing! Never to use it!!

This repo is for testing! Never to use it!!

English | 中文 | 日本語

logo

vscode-background

Bring background images to your Visual Studio Code

fullscreen、editor、sidebar、panel、carousel、custom images/styles...

GitHub | Visual Studio Marketplace

Version Installs Ratings Stars Build Status License

Multiple sections, editor、sidebar、panel

fullscreen

Installation

There are 2 ways to install this extension:

  1. Install from Visual Studio Marketplace.
  2. Search shalldie.background from vscode.

Custom

User defined requirements can be met by changing the configuration(settings.json).

what's settings.json | where?

Config

Global Config

Name Type Default Description
background.enabled Boolean true Whether to enable background extension.

Editor Section Config

Edit background.editor to config editor section.

Name Type Default Description
useFront boolean true Place the image above or below the code.
style object {} Custom style for images. MDN Reference
styles object[] [{},{},{}] Each style of editor section image.
images string[] [] Your custom images, support https and file protocol.
interval number 0 Seconds of interval for carousel, default 0 to disabled.
random boolean false Whether to randomly display images.

example:

{
  "background.editor": {
    "useFront": true,
    "style": {
      "background-position": "100% 100%",
      "background-size": "auto",
      "opacity": 0.6
    },
    "styles": [{}, {}, {}],
    // Local images can be dragged into the browser to quickly get the file protocol address from the address bar
    "images": ["https://pathtoimage.png", "file:///path/to/local/file"],
    "interval": 0,
    "random": false
  }
}

Fullscreen、Sidebar、Panel Section Config

Edit background.fullscreen、background.sidebar、background.panel to config these sections.

Name Type Default Description
images string[] [] Your custom images, support https and file protocol.
opacity number 0.2 Opacity of the images, alias to opacity, 0.1 ~ 0.3 recommended.
size string cover Alias to background-size, cover to self-adaption (recommended).
position string center Alias to background-position, default center.
interval number 0 Seconds of interval for carousel, default 0 to disabled.
random boolean false Whether to randomly display images.

example:

{
  "background.fullscreen": {
    // Local images can be dragged into the browser to quickly get the file protocol address from the address bar
    "images": ["https://pathtoimage.png", "file:///path/to/local/file"],
    "opacity": 0.2,
    "size": "cover",
    "position": "center",
    "interval": 0,
    "random": false
  },
  // `sidebar` and `panel` have the same config as `fullscreen`
  "background.sidebar": {},
  "background.panel": {}
}

Quick Command

Click the 「Background」 button on the right-bottom of statusbar, all commands of background will appear:

Common Issues

This extension works by editting the vscode's js file.

Please refer to the Common Issues if you met some problems.

Uninstall

Please refer to Common Issues#how-to-uninstall.

Contributors 🙏

shalldie suiyun39 frg2089 AzureeDev tumit asurinsaka u3u kuresaru Unthrottled rogeraabbccdd rogeraabbccdd

Contributing Guide

Refer to Contributing Guide.

Change Log

You can checkout all our changes in our CHANGELOG.

Share Your Images

We share background images here.

Migration from v1

The configuration of v1 is outdated and currently maintains a certain level of compatibility. Please refer to migration-from-v1.md for migration.

LICENSE

MIT

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft