DEV Community

Stefany Repetcki
Stefany Repetcki

Posted on

PASSO A PASSO: COMO COLOCAR UMA IMAGEM DE FUNDO NO VSCODE

Neste artigo vou mostrar como você pode colocar uma imagem de fundo no seu Visual Studio Code JUNTO com seu Tema, que por sua vez recomendo o tema de minha autoria https://marketplace.visualstudio.com/items?itemName=stefanycr.stefany-repetcki-theme&ssr=false#overview
:D

Você vai poder colocar a foto que desejar:
Image description

PASSO A PASSO

1° BAIXE A EXTENSÃO ( Custom CSS and JS Loader )
Image description

2° Crie um arquivo CSS no seguinte path, caso não exista você pode criar as pastas.

C:\Users\SEU-USUARIO\ .vscode\vscode_style

3° Crie um arquivo com o nome vscode_style.css e coloque as seguintes linhas de código dentro deste arquivo de estilo.

body{
pointer-events: auto !important;
background-size: 100% !important;
opacity: 0.90 !important;
background-position: 0 0 !important;
background-image: url('COLOQUE A URL DA SUA IMAGEM AQUI');
content: '';
position: absolute;;
z-index: 999;
width: 100%;
background-repeat: no-repeat;
}

4° Na propriedade background-image troque a frase "COLOQUE A URL DA SUA IMAGEM AQUI" por uma imagem com url, por exemplo, na imagem desejada você copia o endereço e cola dentro do url('');

Image description

Ficará desta forma o arquivo css:

body{
pointer-events: auto !important;
background-size: 100% !important;
opacity: 0.90 !important;
background-position: 0 0 !important;
background-image: url('https://media.istockphoto.com/photos/exemplo');
content: '';
position: absolute;;
z-index: 999;
width: 100%;
background-repeat: no-repeat;
}

O Path do seu estilo ficará assim:

C:\Users\SEU-USUARIO.vscode\vscode_style\vscode_style.css

5° Após isso localize em seu vscode o settings.json dele, para facilitar pode dar um Ctrl + P e procurar por >settings

Procure o settings.json da sua IDE
Image description

6° Coloque esta estrutura com o caminho do seu arquivo css:

{
"vscode_custom_css.imports":["file:///C:/Users/SEU-USUARIO/.vscode/vscode_style/vscode_style.css"],
}

Obs: o file/// é obrigatório e as barras são / se colocar invertida não funcionará.

7° Por fim você pode dar um CTRL + P novamente e procurar por

Enable custom CSS and JS

8° Reinicie seu vscode para visualizar suas alterações. Se não funcionou verifique todos os passos se deixou algo para trás, como um erro de nomenclatura, sintaxe ou css mesmo. Você pode ficar alterando o seu fundo sempre que desejar neste arquivo css, apenas mudando a url da imagem :D

Espero que tenha ajudado. Abraço da dev tefinha :D

linkedin e github

Top comments (2)

Collapse
 
gledsonsilva profile image
Francisco Glêdson Silva Souza

Consegui executar na versão instalada no Windows.
Tem como usar também na versão portable?

Collapse
 
erick_mauricio_6c565123c3 profile image
Erick Mauricio • Edited

caso ainda tenha interesse eu sei como fazer. no portable