Background image for vs code

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",
    ]

---

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.

Comments

[Fox]

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]

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]

It broke my vscode.
Thanks a lot.

[Allwell Onen]

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

[oelun-In]

aha ah omo naija

[KT022]

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

[studboo]

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"
    ],

[Faraz_Salehi]

local path wont work on windows 10 !

[Bharath Muppa]

Can you share your settings, because it is working on my machine 😅

[Jkontt2000]

Can you also share your configuration with me please?

[Yuborama]

Please, pass me your configuration to upload an image in your windows 10 locally

[Nico]

It works, but the image is not full screen, it's only part of it...