Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

imagem no css

Ola! como dito em várias aulas icones devem ser declarados no css ao inves do html, só que estou com um problema de formatação que não consigo identificar o erro. estou declarando meu icone no html como uma div e no css aplico o background : url(""), só que o arquivo .png não aparece na visualização. testei declarando com a tag img no html e ele aparece, ai fiquei sem entender. No html:

  <div class="conteudo__caixas___icones"></div>

No css:

.conteudo__caixas___icones{
    background: url('../../img/icone-conversor.png');
}

resultado-do-programa-usando-img ] resultado-do-programa-usando-div

3 respostas

Oi, Natalia.

Nesse caso, acho que você precisa declarar uma altura na sua div .conteudo__caixas___icones para a imagem aparecer, já que agora ela será o background. Por exemplo:

.conteudo__caixas___icones{
    background: url('../../img/icone-conversor.png');
    height: 92.4px;
}

Funcionou! Só mias uma pergunta. Tem algum jeito de manipular o tamanho da imagem como backgorund? Por que eu percebi que a imagem tem um tamanho fixo e o height so modifica o valor da caixa da div e não da imagem em si

solução!

Que bom que deu certo!

Existem várias propriedades que podemos utilizar para fazer ajustes no background-image, as que eu mais utilizo são estas:

background-position: center; /* Centraliza a imagem */
 background-repeat: no-repeat; /* Não repete a imagem */
 background-size: cover; /* Redimensiona a imagem de fundo para cobrir todo o container */

Vale a pena dar uma lida na documentação para aprender um pouco mais acerca de cada uma delas e sobre as demais também, pois serão muito úteis. :)

Recomendo estes sites:

Abraços,