DEV Community

Stefany Repetcki
Stefany Repetcki

Posted on

45 2

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

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

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

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay