Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Imagens não aparecem no fundo dos links das redes sociais

Referente ao curso HTML5 e CSS3 I: Suas primeiras páginas da Web

por José Alex de Souza da Silva
| 193.7k xp | 21 posts

O arquivo CSS e as Imagens estão em pastas diferentes.

Código HTML:

<li>
                    <a class="github" href=" https://github.com/git-joaodasilva">
                        github
                    </a>
                </li>
                <li>
                    <a class="twitter" href=" https://twitter.com/twitter-joaodasilva">
                        twitter
                    </a>
                </li>
                <li>
                    <a class="linkedin" href=" https://br.linkedin.com/pub/linkedin-joao-da-silva/32/4/508">
                        linkedin
                    </a>
                </li>

Código CSS:

.github{
    background-image: url(/github.png);
}
.twitter{
    background-image: url(/twitter.png);
}
.linkedin{
    background-image: url(/linkedin.png);
}
2 respostas
solução!
por Danilo Sales
| 384.9k xp | 70 posts
Analista desenvolvedor Senior

As imagens não estão aparecendo por dois motivos:

1 - Quando usamos url no css, devemos colocar o caminho entre aspas simples, ficando assim url('twitter.png').

2 - Na definição do caminho da imagem, você utilizou o / que significa que ele deve procurar dando inicio a raiz do site. Ou seja, para localizar a imagem seguindo a sua idéia, você deveria colocar o caminho todo:

.github {
    background-image: url('/caminho-ate-a-pasta/github.png');
}

Como você está testando no seu computador, você teria que descrever o caminho todo a partir do file:// no caso de um site já hospedado é a partir do seu endereço base: www.alura.com.br, entendeu ?

A melhor forma é você definir a partir de onde se encontra seu arquivo css, sendo assim podemos usar o .. (dois pontos) para voltar uma pasta em seguida entrar na pasta imagens como mostrado abaixo:

.github{
    background-image: url('../imagens/github.png');
}

Espero ter ajudado!!

por José Alex de Souza da Silva
| 193.7k xp | 21 posts

Segui os passos que você indicou, e funcionou. Mas tive que inverter as barras do caminho da pasta pra essa "/".