English | 中文 | 日本語

vscode-background

Bring background images to your Visual Studio Code

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

GitHub | Visual Studio Marketplace

Multiple sections, editor、sidebar、auxiliarybar、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[]	[]	Custom images, supports online and local images, as well as folders.
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": [{}, {}, {}],
    // `images` supports online and local images, as well as folders.
    "images": [
      // online images, only `https` is allowed.
      "https://hostname/online.jpg",
      // local images
      "file:///local/path/img.jpeg",
      "/home/xie/downloads/img.gif",
      "C:/Users/xie/img.bmp",
      "D:\\downloads\\images\\img.webp",
      // local folders
      "/home/xie/images"
    ],
    "interval": 0,
    "random": false
  }
}

Fullscreen、Sidebar、Auxiliarybar、Panel Section Config

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

Name	Type	Default	Description
images	string[]	[]	Custom images, supports online and local images, as well as folders.
opacity	number	0.1	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": {
    // `images` supports online and local images, as well as folders.
    "images": [
      // online images, only `https` is allowed.
      "https://hostname/online.jpg",
      // local images
      "file:///local/path/img.jpeg",
      "/home/xie/downloads/img.gif",
      "C:/Users/xie/img.bmp",
      "D:\\downloads\\images\\img.webp",
      // local folders
      "/home/xie/images"
    ],
    "opacity": 0.1,
    "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 🙏

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