DEV Community

loading...
Cover image for Background image for vs code

Background image for vs code

bharathmuppa profile image Bharath Muppa Updated on ・1 min read

If you are like me, who likes to spend a considerable amount of time making your work a bit more exciting with a workspace environment. This article helps you to customize your vscode background in 2 steps.

Steps

  1. install this vscode plugin.
  2. in vscode run CMD/CTRL + SHIFT + P and choose The Open Settings (JSON) command and copy the following
  "background.enabled": true,
  "background.loop": false,
  "background.useDefault": false,
  "background.useFront": false,
  "background.style": {
        "content": "''",
        "pointer-events": "none",
        "position": "absolute",
        "z-index": "99999",
        "width": "70%",
        "height": "100%",
        "margin-left":"30%",
        "background-position": "right",
        "background-size": "cover",
        "background-repeat": "no-repeat",
        "opacity": 0.1
    },
  "background.customImages": [
        "https://cdn.wallpapersafari.com/5/23/AMbq2m.jpg",  "https://ih1.redbubble.net/image.810930104.5005/raf,750x1000,075,t,FFFFFF:97ab1c12de.jpg",
        "D:/ec/images/terminal/robot.jpg",
    ]
Enter fullscreen mode Exit fullscreen mode

On the restart, you should see your cool new editor with a background image.

Note: To remove the warning from vscode, click on the little setting button and then select don't show again.

Discussion (0)

pic
Editor guide