IMAGEM NO BACKGROUND NAO APARECE, TENTEI DE TUDO QUE ACHEI.. HEELP

24/12/2020

0

Tô iniciando na área, desculpe pela dúvida de noob...

O código é o a seguir
 }
 
body { 
       background-color:#00BFFF;
       color: rgba(20,0,0,0.9);
	   background-image: url("C:\Users\Usuario\Desktop\programacao\sitegoogleglass1\projeto-glass-html5\_imagens\especificacoes.png");
	   
  }



E nao funciona de jeito nenhum, testei de várias maneiras indicadas por aí na net e nada.... Onde estou errando?
O caminho da imagem está correto.. não sei o que fazer, por favor me ajudem!
Alef

Alef

Responder

Post mais votado

29/12/2020

O CSS procura imagens\\\\\\\\arquivos por padrão na mesma pasta. Por exemplo, se seu arquivo style.css estiver na pasta CSS, ao colocar:

  background-image: url("C:\\\\\\\\Users\\\\\\\\Usuario\\\\\\\\Desktop\\\\\\\\programacao\\\\\\\\sitegoogleglass1\\\\\\\\projeto-glass-html5\\\\\\\\_imagens\\\\\\\\especificacoes.png");


Você está dizendo para procurar na pasta CSS, a pasta C\\\\\\\\users\\\\\\\\...etc. Ou seja, um caminho que não existe.

Para resolver o seu problema sempre tente deixe seus arquivos de projeto em uma pasta única, e crie subpastas para imagens, css, javascript. Ai você pode navegar pelas pastas assim:

1 - Imagem na mesma pasta do arquivo em que você a está colocando:

   background-image: url("./arquivoNoMesmoLocal.png");


2 - Imagem dentro da pasta imagens, que é uma pasta irmã da pasta CSS, onde está o arquivo que você quer colocar sua imagem;

   background-image: url("../imagens/imagem.png");


onde ( ../ ) significa que você está voltando uma pasta e acessando a pasta imagens e o aquivo que está dentro dela.





Obrigado! sei que é um erro noob, mas nada dava certo do que eu tentei, muito obrigado mesmo! Vou estudar mais sobre caminhos, obrigado pela explicação.
Das opções que você me deu, optei por jogar a imagem na mesma pasta do arquivo que estava sendo codificado, me pareceu ser a opção mais rápida, muito obrigado mesmo e por todas as dicas!

Alef

Alef
Responder

Mais Posts

26/12/2020

Jonatan Souza

O CSS procura imagens\\\\arquivos por padrão na mesma pasta. Por exemplo, se seu arquivo style.css estiver na pasta CSS, ao colocar:

  background-image: url("C:\\\\Users\\\\Usuario\\\\Desktop\\\\programacao\\\\sitegoogleglass1\\\\projeto-glass-html5\\\\_imagens\\\\especificacoes.png");


Você está dizendo para procurar na pasta CSS, a pasta C\\\\users\\\\...etc. Ou seja, um caminho que não existe.

Para resolver o seu problema sempre tente deixe seus arquivos de projeto em uma pasta única, e crie subpastas para imagens, css, javascript. Ai você pode navegar pelas pastas assim:

1 - Imagem na mesma pasta do arquivo em que você a está colocando:

   background-image: url("./arquivoNoMesmoLocal.png");


2 - Imagem dentro da pasta imagens, que é uma pasta irmã da pasta CSS, onde está o arquivo que você quer colocar sua imagem;

   background-image: url("../imagens/imagem.png");


onde ( ../ ) significa que você está voltando uma pasta e acessando a pasta imagens e o aquivo que está dentro dela.



Responder

08/09/2022

Filipe Oliveira

Boa noite.

Fiz uma cópia da imagem direto para a pasta css e mesmo assim continuo com o mesmo problema.

Estou lindando com isso ao tentar realizar o projeto da missão 5 do front-end.

Também tentei:
mudar para imagens que já estão carregadas no html e carregar pelo css;
usar tag img na div do html;
imagens de dimenssão menores e maiores;

...e não consegui carregar a imagem.
Responder

09/09/2022

Edy Carlos

boa tarde Alef,

Cria uma pasta img dentro do seu repositório, joga sua imagem dentro desta pasta e depois chama no css

background: url(../img/logo.png) center center no-repeat fixed;
Responder

01/12/2022

Gustavo Brasil

tem que ser /img/capa.jpg, para inserir imagens normamel o img/capa.jpg ja basta, mas no background-image tem que voltar uma pasta
Responder

Assista grátis a nossa aula inaugural

Assitir aula

Saiba por que programar é uma questão de
sobrevivência e como aprender sem riscos

Assistir agora

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar