Background image for vs code

#vscode

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

install this vscode plugin.
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",
    ]

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.

Top comments (12)

Fox • May 22 '21

this isnt working

    "background.customImages": [
      "https://localhost/localhost-whitelisted/fundy%20in%20maid%20dress.png",
    ],

i try local apache server cause /home/fox/Pictures/fundy in maid dress.png doesnt work either

Fox • May 22 '21

Fixed its the /usr/share/code is unwriteable sudo chown urUsername /usr/share/code -R then chmod ugo+rwx /usr/share/code (for Linux users who install vscode using dpkg -i)

crhodes • Nov 11 '21

It broke my vscode.
Thanks a lot.

Allwell Onen • Apr 22 '22

It broke yours, it worked for him. We move.

oelun-In • Nov 6 '22

aha ah omo naija

KT022 • Jul 7 '22

Thank you a lots it help you so much after many times unsuccessful trial

studboo • Dec 14 '21

you can try my settings and use images you like



"background.enabled": true,
    "background.loop": false,
    "background.useDefault": false,
    "background.useFront": false,
    "background.style": {
        "content": "''",
        "pointer-events": "none",
        "position": "absolute",
        "z-index": "99999",
        "height": "100%",
        "width": "100%",
        "background-position": "right bottom",
        "background-size": "20%",
        "background-repeat": "no-repeat",
        "opacity": 0.2
    },
    "background.customImages": [
        "https://studboo.com/wp-content/uploads/2020/02/a2.png",
        "https://studboo.com/wp-content/uploads/2020/02/b2.png",
        "https://studboo.com/wp-content/uploads/2020/02/c2.png",
        "https://studboo.com/wp-content/uploads/2020/02/d2.png",
        "https://studboo.com/wp-content/uploads/2020/02/e2.png",
        "https://studboo.com/wp-content/uploads/2020/02/f2.png",
        "https://studboo.com/wp-content/uploads/2020/02/g2.png",
        "https://studboo.com/wp-content/uploads/2020/02/h2.png",
        "https://studboo.com/wp-content/uploads/2020/02/j2.png",
        "https://studboo.com/wp-content/uploads/2020/02/k2.png",
        "https://studboo.com/wp-content/uploads/2020/02/i2.png"
    ],