WebStorm
 
2024.1
Shortcuts: Windows
Get WebStorm
You are viewing the documentation for an earlier version of WebStorm.

Background image

Last modified: 22 March 2024

You can set any image as a custom background for the editor and all tool windows in WebStorm. Configuring an image is possible when you have a project opened.

Configure a custom background image

  1. Open a project in WebStorm.

  2. Press CtrlAlt0S to open settings and then select Appearance & Behavior | Appearance.

  3. Click the Background Image button.

    The Background Image button in Appearance settings

    tip

    Alternatively, if the image is in your project, right-click it in the editor or in the Project tool window and select Set Background Image from the context menu. You can also press CtrlShift0A, find and select the Set Background Image action.

  4. In the Background Image dialog, specify the image you want to use as the background and click OK to apply the changes.

    The Background Image dialog

    For more information about the options, refer to Background image settings.

Background image settings

The Background Image dialog has the following options:

Image

Either specify a local path to an image in your file system or a URL to an image on a remote server.

Opacity

Specify the relative opacity of the image, where 100 is completely opaque and 0 is completely transparent.

Placement options

Use the icons to select where to place the image:

  • Mirror the image vertically or horizontally

  • Select whether to place one copy of the image at its original size, scale the image to fit the entire width, or fill the entire width with copies of the image at its original size

  • If you choose to keep the original size, select where to put the image: in the center, on a side, or in a corner.

This project only

Select if you want to use this custom image as a background only in the current project.

Editor and Tools

Configure an image to be used as the background of the editor and tool windows.

Empty Frame

Configure an image to be used as the background when no files are open in the editor.

Clear and Close

Clear the background image and use the default background.