Ir para conteúdo


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


15 respostas neste tópico

#1 ----- s_ric_ptbrasil --- --

----- s_ric_ptbrasil --- --
  • Visitantes

Postado 31 October 2007 - 16:43 PM

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á.

#2 Geleiaskt

Geleiaskt
  • Membros
  • 105 posts

Postado 31 October 2007 - 19:03 PM

E aí cara, beleza?

Em vez de utilizar ID, recomendo utilizar CLASS na tag TD.
Tenta fazer assim:


<td class="logo">

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



Abraço! ^^
Agência 4Design - www.agencia4design.com
Jamerson Ramalho - WebDesign [desde 2005]

#3 ----- s_ric_ptbrasil --- --

----- s_ric_ptbrasil --- --
  • Visitantes

Postado 01 November 2007 - 08:01 AM

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;
}



#4 .Andreia.

.Andreia.
  • Veteranos
  • 5878 posts
  • Gender:Female
  • Location:São Paulo - SP

Postado 01 November 2007 - 08:41 AM

um exemplo que aqui funcionou:

CODE
<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>

--------------------------------------------------------------------------------------
Não respondo dúvidas por MP, por favor, usem o fórum.
--------------------------------------------------------------------------------------
- Antes de esquecer um presente de Chuck Norris, Papai Noel existia
- Chuck Norris cria programas em Java e os compila em cima do .NET Framework 3.5.
- Chuck Norris lê e grava DVD no drive de disquete.
- Chuck Norris usa o Notepad como banco de dados.
- Chuck Norris tem um processador AMD em uma placa-mãe Intel.
- Chuck Norris ve paginas usando Telnet... com imagens e flash!
- Chuck Norris consegue dar o comando CTRL+C / CTRL+V numa máquina de escrever.
- Chuck Norris sabe falar em códigos binários.

#5 MLeandroJr!

MLeandroJr!
  • Veteranos
  • 2194 posts
  • Gender:Male
  • Location:São Paulo - SP

Postado 01 November 2007 - 09:30 AM

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.

 

bimcoficial.jpg

#6 ----- s_ric_ptbrasil --- --

----- s_ric_ptbrasil --- --
  • Visitantes

Postado 01 November 2007 - 10:20 AM

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.

#7 MLeandroJr!

MLeandroJr!
  • Veteranos
  • 2194 posts
  • Gender:Male
  • Location:São Paulo - SP

Postado 01 November 2007 - 10:25 AM

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");

 

bimcoficial.jpg

#8 ----- s_ric_ptbrasil --- --

----- s_ric_ptbrasil --- --
  • Visitantes

Postado 01 November 2007 - 11:01 AM

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.

#9 ----- s_ric_ptbrasil --- --

----- s_ric_ptbrasil --- --
  • Visitantes

Postado 01 November 2007 - 14:20 PM

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ê?

#10 .Andreia.

.Andreia.
  • Veteranos
  • 5878 posts
  • Gender:Female
  • Location:São Paulo - SP

Postado 01 November 2007 - 14:34 PM

A pasta é imagens ou images?
--------------------------------------------------------------------------------------
Não respondo dúvidas por MP, por favor, usem o fórum.
--------------------------------------------------------------------------------------
- Antes de esquecer um presente de Chuck Norris, Papai Noel existia
- Chuck Norris cria programas em Java e os compila em cima do .NET Framework 3.5.
- Chuck Norris lê e grava DVD no drive de disquete.
- Chuck Norris usa o Notepad como banco de dados.
- Chuck Norris tem um processador AMD em uma placa-mãe Intel.
- Chuck Norris ve paginas usando Telnet... com imagens e flash!
- Chuck Norris consegue dar o comando CTRL+C / CTRL+V numa máquina de escrever.
- Chuck Norris sabe falar em códigos binários.

#11 ----- s_ric_ptbrasil --- --

----- s_ric_ptbrasil --- --
  • Visitantes

Postado 01 November 2007 - 14:39 PM

Resposta: imagens

#12 Geleiaskt

Geleiaskt
  • Membros
  • 105 posts

Postado 01 November 2007 - 17:57 PM

QUOTE(Lvcifer! @ 01/11/2007 - 09:30) Visualizar Post
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 por Geleiaskt, 01 November 2007 - 17:59 PM.

Agência 4Design - www.agencia4design.com
Jamerson Ramalho - WebDesign [desde 2005]

#13 ----- s_ric_ptbrasil --- --

----- s_ric_ptbrasil --- --
  • Visitantes

Postado 05 November 2007 - 07:56 AM

O HTML:

CODE
<!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:

CODE
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
    }


#14 KaKarotto

KaKarotto
  • Vencedores de desafio
  • 1267 posts
  • Gender:Male
  • Location:São Paulo, Capital.
  • Interests:Informática e Games !!!!! <br /><br />Programação, Desenvolvimento Web, CSS, Web Standarts, Tableless, Javascript, Psp, Playstation, Php ....etc

Postado 05 November 2007 - 14:53 PM

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 por KaKarotto, 05 November 2007 - 14:57 PM.


#15 -----s_ric_ptbrasil--- --

-----s_ric_ptbrasil--- --
  • Visitantes

Postado 05 November 2007 - 15:11 PM

Valeu.

Agora eu entendi.

#16 --Luis Ag --

--Luis Ag --
  • Visitantes

Postado 24 September 2008 - 14:05 PM

QUOTE(KaKarotto @ 05/11/2007 - 14:53) Visualizar Post
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.






Responder



  


1 usuário(s) está(ão) lendo este tópico

0 membros, 0 visitantes, 0 membros anônimos


    Google (1)