A imagem de fundo não aparece quando definida na folha de estilo com texto sublime

Question

Não sei porque mas meu navegador (firefox) não me mostra minha imagem de fundo, quando coloco em html funciona.

meu editor:Texto sublime 2 Eu também uso o MAMP.

meu código css:

.home{
background-image: url('bg-img.jpg');
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}

Pode me ajudar ?Obrigado

Rémi

Answer 1

Acho que as outras respostas/comentários estão no caminho certo.Meu palpite é que a imagem não está no caminho relativo correto para a folha de estilos.Se o seu arquivo CSS estiver em uma pasta fora da raiz da web, como http://example.com/css/site.css, então o navegador irá procurar a imagem de fundo em http://example.com/css/bg-img.jpg ...o que seria um lugar muito estranho para colocá-lo.

Tente colocar o caminho completo do arquivo no seu css...algo assim:

.home{
background-image: url('/images/bg-img.jpg');
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}

(E certifique-se de que bg-img.jpg realmente esteja em /images/, é claro!)

Dou chances iguais de que isso resolva o problema.

Caso contrário, abra a página no navegador, clique com o botão direito e escolha "Inspecionar Elemento" ou similar.Então você pode pesquisar e ver se o seu css se parece com o esperado, ver se você está recebendo algum 404 retornado, etc.Isso deve levá-lo rapidamente ao problema.

Se tudo isso falhar, tente em um navegador diferente.

Aliás, não acho que isso possa ter algo a ver com o Sublime.

obs.Se você ainda está lutando contra isso, edite sua pergunta para incluir o arquivo CSS e HTML completos e um link para a página ativa.

Answer 2

1-talvez seu div.home esteja vazio, então não há altura suficiente para exibi-lo. (Por exemplo, use height:200px para ver)

2-outro motivo é sobre sua url img.se estiver em uma pasta como imagens, você deve tentar isso

.home{
background-image: url('images/bg-img.jpg');
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}

Answer 3

se você quiser adicionar imagem de fundo em sublime ...

body {
    font-family:arial, helvetica, sans-serif;
    font-size: 10px;
    background-image: url(../images/background.gif);
}