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

Caminho relativo das imagens

Referente ao curso HTML5 e CSS3 I: Suas primeiras páginas da Web, no capítulo Nem tudo é o que parece e atividade Image replacement

por Hephaestus
| 110k xp | 9 posts

Olá pessoal, uma dúvida.

Coloquei as minhas imagens dentro de uma pasta, no CSS, depois de tentativa e erro, consegui que as imagens aparecessem no site com a seguinte instrução:

.icones-sociais li{
    display: inline-block;
}

.icones-sociais a{
    width: 40px;
    height: 40px;
    display: inline-block;
    text-indent: -9999999px;
}

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

.twitter{
    background-image: url(../images/twitter.png);
}
.linkedin{
    background-image: url(../images/github.png);
}

Está correto a forma que foi posta ou existe outra forma?

Abs.

3 respostas
solução!
por Manoel de Souza Silva Lima
| 591.7k xp | 464 posts
Analista Judiciário - Analista de Sistemas

Hephaestus,

esse é o procedimento mesmo.

Os

../

são para voltar um nível (diretório) e entrar no nível (diretório) das imagens.

Está correta sua forma!

Bons estudos!

Abraço.

por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Hephaestus, esta correto da forma que você fez, mas porque você teve que fazer isso ?

Imagine que temos a seguinte estrutura:

src
    css
    js
    img
    index.html

Até ai tudo normal, para carregar nossos scripts, css ou imagens diretamente no index.html:

// logotipo
<img alt="Logotipo" src="img/MeuLogo.jpg">

// css
<link href="css/MeuArquivo.css" rel="stylesheet">

// js
<script src="js/MeuArquivo.js"></script>

Como o index.html esta fora de todas as pastas e encontra-se na raiz do projeto basta informar a basta seguida pelo arquivo.

Agora voltando ao seu exemplo, se quisermos carregar alguma imagem dentro de algum css não basta fazer:

// Não existe nenhuma pasta **img** dentro da pasta **css**
background: url(img/NomeImagem.jpg)

// ou

// Não existe nenhuma imagem dentro da pasta **css**
background: url(NomeImagem.jpg)

O que precisamos fazer é: Dizer para o css que precisamos voltar uma pasta e a partir dessa pasta procurar a imagem, fazemos isso através do ../:

background: url(../img/MinhaImagem.jpg

Quando realizamos ../ dentro da pasta img, estamos simplesmente voltando um nível da pasta atual, ou seja, iremos voltar para src.

por Hephaestus
| 110k xp | 9 posts

Obrigado pelas repostas Manoel e Matheus.