1
resposta

Não estou conseguindo colocar a minha img, utilizando o background-image no código

Tenho que colocar essa imagem https://cdn1.gnarususercontent.com.br/1/555669/2e3a2617-e0c7-4211-8302-745fd5dcbf87.jpg de background, só que quando coloco, utilizando esse code: background-image: url("/img");, não acontece nada

https://drive.google.com/file/d/12IkjxArM1tjw6g8gxhJgwVa0sYEj3-Ri/view?usp=sharing = html

https://drive.google.com/file/d/18SA1Ar3yxWPnpGIqFVDxDsrFZTxiw9vD/view?usp=sharing = css

1 resposta

Olá Vinicius, tudo bem?

Peço desculpas pela demora em obter um retorno.

Esse resultado, está ocorrendo por erro de endereçamento, tanto da imagem como do próprio CSS em relação ao arquivo HTML.

Portanto peço que verifique se o caminho da imagem está correto, por exemplo, se a sua imagem está solta na pasta raiz ou seja, sem estar dentro nenhuma outra pasta como exemplificada na imagem abaixo:

  Dentro no Vscode, a imegam mostra 3 tipos de arquivos em uma coluna, arquivos são, de imagem chamado “car-bg.jpg” o index.html e o style.css, sobre a imagem ela tem um sombreamento, que demonstra que ela está sendo selecionada perante os demais arquivos.

Nesse caso utilizamos o comando deste modo:

header{
    background-image: url("car-bg.jpg");
    resto do código…
}

Caso tenha pastas subsequentes, o comando fica:

header{
    background-image: url("Nomedapasta/car-bg.jpg");
    resto do código…
}

Caso o erro persista, podemos então partir para um possível erro no endereçamento da tag <link>, mas primeiramente podemos fazer um teste, altere algum valor no CSS de forma esdrúxula e recarregue a página, por exemplo:

h1{
    font-size: 1000px;
}

Esse comando faz com que as letras contidas na tag H1 sofram uma enorme alteração em seu tamanho, caso não tenha nenhum tipo de erro podemos ter uma maior certeza que o erro se encontra no endereço da tag <link>.

Verifique se as ordem das pastas e arquivo está organizado do mesmo modo como exemplificado na foto abaixo:

Dentro da IDE do VS code, a imagem mostra duas  pastas e um arquivo style dentro dessa ultima, pasta que é subsequente da primeira, pasta essa reprentadas por ícones a pasta principal com nome ‘assets” tem um ícone amarelo, ela  guarda a pasta “CSS” que um ícone azul e dentro dela tem o arquivo  “style” que é representada por um 3.

Caso não seja esse o problema o endereçamento está correto.

<link rel="stylesheet" href="assets/css/style.css">

Obs:

  • caso tenha mais arquivos com final “.css” verifique se está ”linkado” com o HTML, o CSS que carrega a imagem dá sua preferência.
  • Após fazer cada alteração mencionada, certifique-se de dar um F5 na página WEB, para ver possíveis alterações e qual resolveu o seu problema com sucesso.

Depois desses pontos mencionados, serem revisados e corrigidos, o seu código volta a funcionar. Espero que com essas dicas eu consiga lhe auxiliar!

Mas caso tenha alguma dificuldade em realizar as alterações , fique tranquilo para trazer novamente, eu irei encontrar outros meios para lhe auxiliar a resolver esse erro.

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!