SuperBG

Supercharge the background of VS Code

VS Code background enhancement plugin for maximizing screen real estate.

Web page as background, GIF demo address

Design atlas as background, GIF demo address

Support to monitor the URL, the web page as the background, so that front-end development, write as you see;
Support to select multiple pictures as the background, and use shortcut keys to quickly switch between pictures, convenient for developers to read the design while writing code;
Support for adjusting background transparency;
Support for zooming background content;
Support shortcut keys;
Support select multiple images as background, and switch background between them via shortcuts;
Supoprt set web page as background;
support adjust the background transparency;
support background scale;

VS Code version > = 1.45.0
On mac, You need to install VS Code to /Applications folder, otherwise you need to run VS Code as admin (sudo open "path/to/directory/VS Code.app")
VS Code version 1.45.0 or greater
On a Mac, you’ll need to install VS Code into the /Applications directory, otherwise you’ll need to open VS Code in admin mode to use the plugin properly (sudo open “path/to/directory/VS code.app “).

You need to follow the steps above to uninstall the extension:

Follow these steps to uninstall the plug-in:

Command+shift+p > superBG.disable > uninstall extension

VS Code warning

“Your Code installation appears to be corrupt. Please reinstall.” warning appears after install the extension, you can click “never show again” to ignore it.

VS Code warning

After this plug-in is installed, or after VS Code is upgraded, VS Code prompts that it is tampered with or corrupted. This is because VS Code does not provide an API for operating background. This plug-in has to modify two lines of main program Code. Solution: Select the [no more] in the upper right corner of the prompt:
When set web page as background, due to security concerns, SVG image can not be the loaded in a web page. (see code.visualstudio.com/api/working…).

A web page cannot be displayed in SVG as a background

Maybe VS Code doesn’t allow SVG images to be loaded on the page for security reasons. No solution yet. (see code.visualstudio.com/api/working…).
the extension is developed on mac, Untested on Windows system.

This plug-in was developed on Mac and has not yet been tested for compatibility on Windows.

Shortcuts	Description
`ctrl+alt+left`	Previous image
`ctrl+alt+right`	Next image
`ctrl+alt+up`	Increase transparency
`ctrl+alt+down`	Decrerase transparency
`ctrl+alt+shift+up`	Increase scale
`ctrl+alt+shift+down`	Decrease by a significant amount
`ctrl+alt+shift+left`	Increase emulatedWidth, Adjust the value to emulate mobile device when set web page as background. When using a web page as a background, reduce the width of the web page container to simulate devices of different sizes
`ctrl+alt+shift+righ`	Decrease emulatedWidth. When using a web page as a background, increase the width of the web page container to simulate devices of different sizes

Name	Type	Description
`superBG.disable`	`Boolean`	Hide background
`superBG.images`	`Array<string>`	Select multiple images as background. Photo collection as background
`superBG.url`	`string`	Set web page as background
`superBG.opacity`	`number`	Opacity: 0-100(%
`superBG.scale`	`number`	The Scale of 0-100 (%). The zoom
`superBG.emulatedWidth`	`number`	Adjust the value to emulate mobile device when set web page as background. Page container width scaling ratio adjusted to simulate different devices when using web page as background, 0-100(%)

Enjoy!