background installs statistics

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][mdn-css] | | styles | object[] | [] | Custom style for each image individually. | | 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:

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][mdn-opacity], 0.1 ~ 0.3 recommended. | | size | string | cover | Alias to [background-size][mdn-background-size], cover to self-adaption (recommended). | | position | string | center | Alias to [background-position][mdn-background-position], default center. | | styles | object[] | [] | Custom style for each image individually. | | interval | number | 0 | Seconds of interval for carousel, default 0 to disabled. | | random | boolean | false | Whether to randomly display images. |

example:

Quick Command

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

Common Issues

This extension works by editing the vscode's html 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

Starting from v3.0, v1 top-level configuration is no longer supported. Please refer to migration-from-v1.md to migrate.

LICENSE

MIT

Description from the VS Code Marketplace listing.