Background

The most advanced background image extension for VSCode

Visual Studio Marketplace • Report an Issue • Suggest a Feature

Add multiple background images for the window, editors, sidebars, or the panel. Load backgrounds from file, glob, or URL. Transition between multiple background images.

📃 Installation

Install from the Visual Studio Marketplace.
Install directly from VSCode using the id katsute.code-background.

🖼️ Usage

Type Background: Configuration in the command pallette or press the Background tab in the statusbar.
Select where you want to add a background (Window, Editor, Sidebar, Panel).
Add backgrounds and change how it should be displayed.
Use Background: Install or press the install button.

✨ Features

🖼️ Multiple Backgrounds

Add background images for the whole window, editors, sidebars, or the panel. Transition between multiple background images.

Full Window

Editor, Sidebar, and Terminal

Slideshow

Type Background: Configuration in the command pallette or press the Background tab in the statusbar to access the configuration menu.

✱ Glob and URL Support

Add background images by file, folder, glob, or URL.

⚠️ Use only / for directories
node-glob only accepts / as path separators, \ is reserved for escape characters.

💻 Commands

Command	Description
`Background: Install`	Installs and enables the background.
`Background: Uninstall`	Uninstalls and disables the background.
`Background: Reload`	Randomizes the backgrounds. Background must already be installed.
`Background: Configuration`	Opens the configuration menu.

⚙️ Configuration

Use the Background: Configuration command to access the configuration menu.

Background properties are saved as arrays so you can have different options for different UI elements.

The order settings are saved in is:

Window
Editor
Sidebar
Panel

Background	Type	Description
`background.windowBackgrounds`	`string[]`	The list of files or globs to use for the window background image.
`background.editorBackgrounds`	`string[]`	The list of files or globs to use for editor background images.
`background.sidebarBackgrounds`	`string[]`	The list of files or globs to use for the sidebar background images.
`background.panelBackgrounds`	`string[]`	The list of files or globs to use for the panel background image.

Property	Type	Description
`background.backgroundAlignment`	`enum[4]`	The alignment of the background image.
`background.backgroundAlignmentValue`	`string[4]`	If the background image alignment is set to `Manual`, this is the literal value for the `background-position` css property. Only accepts a css <position>.
`background.backgroundBlur`	`string[4]`	Background image blur. Only accepts a css <length>.
`background.backgroundOpacity`	`number[4]`	The UI opacity. 0 is fully visible and 1 is invisible.
`background.backgroundRepeat`	`enum[4]`	The background image repeat.
`background.backgroundSize`	`enum[4]`	The background image size.
`background.backgroundSizeValue`	`string[4]`	If the background image size is set to `Manual`, this is the literal value for the `background-size` css property. Only accepts a css <position>.
`background.backgroundChangeTime`	`number[4]`	How long in seconds before the background should automatically change. Set to 0 to always use the same image.

Advanced	Type	Description
`background.useWindowOptionsForAllBackgrounds`	`boolean`	If enabled, all background images will use the options set for the windows background. This does not include the backgrounds, you still need to add background images separately.
`background.renderContentAboveBackground`	`boolean`	If enabled, content like images, pdfs, and markdown previews will render above the background.
`background.smoothImageRendering`	`boolean`	If enabled, use smooth image rendering rather than pixelated rendering when resizing images.
`background.CSS`	`string`	Apply raw CSS to VSCode.

⚠️ Known Issues

⚠️ (Mac) read-only file system

This extension doesn’t natively support Mac, please refer to #76 to get this extension working on Mac.

⚠️ (Linux) snap: read-only file system

Applications installed using snap are inherently read-only, install VSCode using deb or rpm.

⚠️ Doesn’t work on WSL

As described in #27, you can not change the background while running this extension in a remote WSL window. You can however still use custom backgrounds by installing and making changes in the main VSCode window, then opening a remote WSL window.

⚠️ VSCode stopped working

This extension modifies an internal file to make backgrounds work, if VSCode stops working replace %LocalAppData%\Programs\Microsoft VS Code\resources\app\out\vs\workbench\workbench.desktop.main.js with workbench.desktop.main-backup.js.

This extension also modifies %LocalAppData%\Programs\Microsoft VS Code\resources\app\product.json, replace with product-backup.json if VSCode stops working.

GitHub Copilot and ChatGPT are strictly prohibited on this repository.

This extension is released under the GNU General Public License (GPL) v2.0.