DEV Community

Stefany Repetcki
Stefany Repetcki

Posted on

42 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

Sentry blog image

Identify what makes your TTFB high so you can fix it

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

Read 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

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay