Css: Background-image Não Aparece. Por Que?

Outubro 31, 2007

Na página eu relacionei na <td id="logo">...

Na página class.css está assim:

#logo {

background-image: url("/images/css.gif");

background-repeat: no-repeat;

}

E pra lembrar, a página html está linkada com o estilo <link href="class.css" rel="stylesheet" type="text/css">

Por que a imagem não aparece no layout e nem no browser? No layout aparece um quadrado cinza ao invés da imagem.

Agradeço desde já.

Geleiaskt · Outubro 31, 2007

E aí cara, beleza?

Em vez de utilizar ID, recomendo utilizar CLASS na tag TD.

Tenta fazer assim:

.logo{

background:url(./images/css.gif) no-repeat;

}

Abraço! ^^

Novembro 1, 2007

Não funcionou.

Será que na classe abaixo alguma coisa está impedindo a imagem de ser exibida no layout?

.logo{

position:absolute;

background: url("logo.gif") no-repeat;

top:0;

left:0;

padding:0;

background-color:#003d79;

height:80px;

width:90px;

}

.Andreia. · Novembro 1, 2007

um exemplo que aqui funcionou:

<html>
<head>
<style type="text/css">
.logo {
    background-image: url(images/css.gif);
    background-repeat: no-repeat;
}
</style>
</head>
<body>

<table border="1" cellspacing="0" width="200" height="100">
    <tr>
        <td class="logo">&nbsp;</td>
    </tr>
</table>

</body>
</html>

MLeandroJr! · Novembro 1, 2007

Só reforçando...

Troque o código:

background: url("logo.gif") no-repeat;

Por:

background-image: url("logo.gif");

background-repeat: no-repeat;

Essa é a maneira correta de utilizá-lo.

Novembro 1, 2007

Lvcifer, desta maneira também não funcionou, e da maneira da Andreia não compensa - até fiz, porém não funcionou - porque desta última forma a class está incorporada(importada) e minha class.css está muito grande e irá pesar o html, por isso eu fiz linkada.

Aguardo resposta.

MLeandroJr! · Novembro 1, 2007

A maneira que ela colocou foi apenas um exemplo, você pode fazer css linkada normalmente da forma que ela mostrou.

Se dessa maneira não mostrou o background, verifique o caminho dele, pois se ele estiver em outra pasta você precisará indicá-la para que a imagem apareça, e além do mais, você parte do diretório que está a CSS, não do diretório que está o arquivo que a chama.

Logo, se ela estiver um nível acima, você precisará colocar:

background-image: url("../logo.gif");

Novembro 1, 2007

Ok!

A diferença estava na class="imagem" e não id.

Outra coisa era #logo e .logo

E o principal o diretório onde se encontra a imagem.

No meu caso: imagens/logo.gif

Valeu pessoal.

Novembro 1, 2007

Olha eu aí de novo pessoal.

A imagem não está aparecendo na página. Lembrando que aquele era página de teste e este é a página do projeto. O que eu fiz? Repeti a mesma coisa que fiz no outro e não aparece. Por quê?

O link da class na página está correta, pois o layout está tudo certinho

<link href="css/class.css" rel="stylesheet" type="text/css">;

na TD <td class="logo.gif">;

e na CSS

.logo{

position:absolute;

background-image: url("imagens/logo.gif");

background-repeat: no-repeat;

top:0;

left:0;

padding:0;

background-color:#003d79;

height:80px;

width:90px;

}

quando fiz o ftp a imagem(logo) não aparece no layout. Por quê?

.Andreia. · Novembro 1, 2007

A pasta é imagens ou images?

Novembro 1, 2007

Resposta: imagens

Geleiaskt · Novembro 1, 2007

Só reforçando...
Troque o código:
background: url("logo.gif") no-repeat;
Por:
background-image: url("logo.gif");
background-repeat: no-repeat;
Essa é a maneira correta de utilizá-lo.

Ambas estão corretas, vide W3C. ^^

s_ric_ptbrasil, posta teu código aí porque era para funcionar da maneira que postei acima. Deve estar havendo algum conflito no código.

Abraço!

Editado Novembro 1, 2007 por Geleiaskt

Novembro 5, 2007

O HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Relação de Ramais</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="css/class.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#ffffff">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td valign="middle" class="logo"> </td>
    <td valign="top" id="topo">
<table id="login" width="350" height="80" border="0" cellpadding="0" cellspacing="0">
        <tr> 
          <td width="130" height="25" align="left">Login</td>
          <td width="90" height="25"> </td>
          <td width="80" height="25" align="left">Senha</td>
          <td width="40" height="25"> </td>
          <td width="10" height="25"> </td>
        </tr>
        <tr> 
          <td width="130" height="30" bgcolor="#FFFFFF"> </td>
          <td width="90" height="30" align="left"> @teste.com.br</td>
          <td width="80" height="30" bgcolor="#FFFFFF"> </td>
          <td width="40" height="30" valign="middle"> <div id="ok"><a href="#" class="linkum">OK</a></div></td>
          <td width="10" height="30"> </td>
        </tr>
        <tr> 
          <td height="25" colspan="2" id="senha">Esqueci minha senha!</td>
          <td width="80" height="25"> </td>
          <td width="40" height="25"> </td>
          <td width="10" height="25"> </td>
        </tr>
      </table>
      <table width="350" height="80" border="0" cellpadding="0" cellspacing="0" id="usuario">
        <tr>
        
          <td height="40" id="nomeusuario">Ricardo</td>
          <td width="10" height="40"> </td>
        </tr>
        <tr>
          <td height="40" id="logout"><a href="#" class="linkdois">Sair</a></td>
          <td width="10" height="40"> </td>
        </tr>
      </table></td>
  </tr>
  <tr>
     
    <td id="conteudo" colspan="2"> texto </td>
  </tr>
  <tr>
    <td id="bottom" colspan="2"> <table width="758" height="200" cellpadding="0" cellspacing="0" bordercolor="#003d79" style="border-left: 1px solid; border-right: 1px solid; border-top: 1px solid; border-bottom: 1px solid;">
        <tr> 
          <td align="center" valign="middle"> conteudo</td>
        </tr>
      </table></td>
  </tr>
</table>
</body>
</html>

e a Class:

body{
margin:0;
}
.logo{
position:absolute;
background-image: url("imagens/logo.gif");
background-repeat: no-repeat;
top:0;
left:0;
padding:0;
background-color:#003d79;
height:80px;
width:90px;
}
#topo{
background-color:#003d79;
height:80px;
color: #ffffff;
text-decoration: none;
font-family: Verdana, Arial;
font-size: 10px;
text-align: right;
}
#ok{
color:#ffffff;
font-weight: bold;
font-size: 11px;
font-family: Verdana, Arial;
height: 21;
width: 31;
max-height: 21;
max-width: 31;
text-align: center;
border-bottom-color:#888888;
border-bottom-style:solid;
border-bottom-width:1px;
border-left-color:#888888;
border-left-style:solid;
border-left-width:1px;
border-right-color:#888888;
border-right-style:solid;
border-right-width:1px;
border-top-color:#888888;
border-top-style:solid;
border-top-width:1px;
}
a.linkum:link {
color:#FFffff;
text-decoration:none;
}
a.linkum:visited {
color:#ffffff;
text-decoration:none;
}
a.linkum:hover {
color:#ffffff;
text-decoration:none;
}
a.linkum:active {
color:#ffffff;
text-decoration:none;
}

a.linkdois:link {
color:#ffdd00;
text-decoration:none;
font-weight: none;
font-size:10px;
}
a.linkdois:visited {
color:#ffdd00;
text-decoration:none;
font-weight: none;
font-size:10px;
}
a.linkdois:hover {
color:#ffdd00;
text-decoration:none;
font-weight: bold;
font-size:10px;
}
a.linkdois:active {
color:#ffdd00;
text-decoration:none;
font-weight: none;
font-size:10px;
}
#login{
    background-color:#003d79;
    height:80px;
    color: #ffffff;
    text-decoration: none;
    font-family: Verdana, Arial;
    font-size: 10px;
    text-align: right;
}
#senha{
    background-color:#003d79;
    color: #ffdd00;
    text-decoration: none;
    font-family: Verdana, Arial;
    font-size: 10px;
    text-align: left;
}
#nomeusuario{
    background-color:#003d79;
    color: #ffffff;
    text-decoration: none;
    font-family: Verdana, Arial;
    font-size: 12px;
    text-align: right;
}
#logout{
    background-color:#003d79;
    color: #ffdd00;
    text-decoration: none;
    font-family: Verdana, Arial;
    font-size: 10px;
    font-weight: bold;
    text-align: right;
    top:0;
}

#conteudo{
    background-color:#ffffff;
    padding:10;
    color: #003d79;
    text-decoration: none;
    font-family: Verdana, Arial;
    font-size: 10px;
    text-align: left;
}
#TextoLeft {
    color: #003d79;
    text-decoration: none;
    font-family: Verdana, Arial;
    font-size: 10px;    
    background-color:#ffffff;
    text-align: left;
}
#TextoCentro {
    color: #ffffff;
    text-decoration: none;
    font-family: Verdana, Arial;
    font-weight: bold;
    font-size: 10px;    
    background-color:#003d79;
    text-align: center;
    height:20px;
    width:760px;
    max-height:20px;
    max-width:760px;
}
#bottom{
    height:200px;
    width:100%;
    max-height:200px;
    max-width:100%;
    bottom:0;
    position:relative;
    text-align: center;
}
#td124 {
    color: #003d79;
    text-decoration: none;
    font-family: Verdana, Arial;
    font-size: 9px;    
    background-color:#ffffff;
    text-align: left;
    height:20px;
    width:124px;
    max-height:20px;
    max-width:124px;
    
}
#td30 {
    color: #003d79;
    text-decoration: none;
    font-family: Verdana, Arial;
    font-weight: bold;
    font-size: 10px;    
    background-color:#f4f4f4;
    text-align: center;
    height:20px;
    width:30px;
    max-height:20px;
    max-width:30px;
}
#ramal {
background-color:#003d79;
color:#ffffff;
font-family: Verdana, Arial;
font-size:10px;
font-weight: bold;
text-align:center;
height:20px;
width:758px;
max-height:20px;
max-width:758px;

}
#table {
text-align: center;
height:180px;
width:760px;
max-height:180px;
max-width:760px;
border-bottom-color:#003d79;
border-bottom-style:solid;
border-bottom-width:1px;
border-left-color:#003d79;
border-left-style:solid;
border-left-width:1px;
border-right-color:#003d79;
border-right-style:solid;
border-right-width:1px;
border-top-color:#003d79;
border-top-style:solid;
border-top-width:1px;

}
#ModeloCSS {
    color: #3366CC;
    text-decoration: none;
    font-family: Verdana, Arial;
    font-weight: bold;
    text-align: left;
    font-size: 10;    
    background-color: #DCDCDC;
    background-image:url('pasta/imagem.jpeg');
    border:thin;
    height:100px;
    width:100px;
}
a {    
}
body {    
    }
h2 {
    }
table {
    }
td, th {    
    }
a:hover {    
    text-decoration: underline
    }

KaKarotto · Novembro 5, 2007

Opa, seguinte cara, o css, quando usade com o link rel, parte do seu próprio diretório quando você precisa definir um caminho.

Se você tem uma arvore do seu site dessa forma:

/css

/js

/images

index.htm

Considerando que o index.htm tem o link rel, então você deve pegar a imagem do diretório das imagens assim:

#logo{

background:url('../images/logo.gif');

}

Entendeu? você precisa "descer" um nível (../) para então entrar no diretório das imagens e achar o arquivo certo. Isso acontece porque, como eu disse, o css quando usado como link rel, parte do seu próprio diretório.

AJudei? Eu vou pra facul que eu to atrasado!!!

Kelabrassssssss

Edit: O conceito de classes é usado para poupar repetição de código, use classe para usar as mesmas características para varios objetos, e use id para usar as características apenas em um objeto.

Editado Novembro 5, 2007 por KaKarotto

Novembro 5, 2007

Valeu.

Agora eu entendi.

Setembro 24, 2008

Opa, seguinte cara, o css, quando usade com o link rel, parte do seu próprio diretório quando você precisa definir um caminho.
Se você tem uma arvore do seu site dessa forma:
/css
/js
/images
index.htm
Considerando que o index.htm tem o link rel, então você deve pegar a imagem do diretório das imagens assim:
#logo{
background:url('../images/logo.gif');
}
Entendeu? você precisa "descer" um nível (../) para então entrar no diretório das imagens e achar o arquivo certo. Isso acontece porque, como eu disse, o css quando usado como link rel, parte do seu próprio diretório.
AJudei? Eu vou pra facul que eu to atrasado!!!
Kelabrassssssss
Edit: O conceito de classes é usado para poupar repetição de código, use classe para usar as mesmas características para varios objetos, e use id para usar as características apenas em um objeto.

Sua dica é clara, mas estou com outro problema: Navegador IE7 e Firefox5.

O código abaixo é interpretado pelo IE7 mas não funciona no Firefox5:

#logo{

background:url('../images/logo.gif');

}

O código abaixo funciona no Firefox5, mas não no IE7:

#logo{

background:url('images/logo.gif');

}

Você tem alguma ideia de como isso é possível?

Obrigado.

Isai · Dezembro 30, 2016

Hum... To aprendendo agora, mas no livro que estou usando me orienta a colocar background-image: url (multimidia/importante-saber.jpg) , url (recursos/back-bolinha.gif); porem, ao abrir a pagina no navegador, nada aparece. já verifiquei os arquivos, o diretório ta certo, já olhei em outros navegadores, já tentei ver se escrevi errado, e nada. Algum teria alguma sugestão de como consertar isto?

Desde já agradeço.

Aqui a declaração por completo:

h2{
           background-color: #C0262C;
           background-image: url (multimidia/importante-saber.jpg) , url (recursos/back-bolinha.gif);
           background-repeat: no-repeat , repeat;
           background-position: center right , center center;
           width: 470px;
           padding: 61px 400px 61px 100px;
           color: #FFFFFF;
           font-size: 2.5em;
           letter-spacing: .1em;
       }

Editado Dezembro 30, 2016 por Isai
Apenas um edit: A declaração é '' background-image: url (multimidia/importante-saber.jpg) , url (multimidia/back-bolinha.gif);'' e não recusos, como tava escrito, nada importante, mas so pra desencargo de consiencia.

Natanael Santos · Agosto 6, 2018

eu também não estava conseguindo inserir imagem no cabeçalho do meu site pelo "CSS", mas consegui arrumar

só tive que colocar na primeira linha do código "CSS"

@charset "UTF-8";

e colocar no codigo "HTML" dentro da "tag" HEAD

<meta charset="UTF-8">

isso ajuda o navegador reconhecer nosso padrão de escrita

depois disso funcionou

Editado Agosto 6, 2018 por Natanael Santos

Entrar

Css: Background-image Não Aparece. Por Que?

Pergunta

Guest --- s_ric_ptbrasil ---

Link para o comentário

Compartilhar em outros sites

17 respostass a esta questão

Posts Recomendados

Link para o comentário

Compartilhar em outros sites

Guest --- s_ric_ptbrasil ---

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Guest --- s_ric_ptbrasil ---

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Guest --- s_ric_ptbrasil ---

Link para o comentário

Compartilhar em outros sites

Guest --- s_ric_ptbrasil ---

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Guest --- s_ric_ptbrasil ---

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Guest --- s_ric_ptbrasil ---

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Guest ---s_ric_ptbrasil---

Link para o comentário

Compartilhar em outros sites

Guest Luis Ag

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns