Guest --- s_ric_ptbrasil ---

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

Recommended Posts

Guest --- s_ric_ptbrasil ---   
Guest --- s_ric_ptbrasil ---

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

Compartilhar este post


Link para o post
Compartilhar em outros sites
Geleiaskt    0

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! ^^

Compartilhar este post


Link para o post
Compartilhar em outros sites
Guest --- s_ric_ptbrasil ---   
Guest --- s_ric_ptbrasil ---

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;

}

Compartilhar este post


Link para o post
Compartilhar em outros sites
.Andreia.    0

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>

Compartilhar este post


Link para o post
Compartilhar em outros sites
MLeandroJr!    0

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites
Guest --- s_ric_ptbrasil ---   
Guest --- s_ric_ptbrasil ---

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites
MLeandroJr!    0

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

Compartilhar este post


Link para o post
Compartilhar em outros sites
Guest --- s_ric_ptbrasil ---   
Guest --- s_ric_ptbrasil ---

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites
Guest --- s_ric_ptbrasil ---   
Guest --- s_ric_ptbrasil ---

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

Compartilhar este post


Link para o post
Compartilhar em outros sites
Geleiaskt    0
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

Compartilhar este post


Link para o post
Compartilhar em outros sites
Guest --- s_ric_ptbrasil ---   
Guest --- s_ric_ptbrasil ---

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
    }

Compartilhar este post


Link para o post
Compartilhar em outros sites
KaKarotto    0

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

Compartilhar este post


Link para o post
Compartilhar em outros sites
Guest Luis Ag   
Guest Luis Ag
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.

Compartilhar este post


Link para o post
Compartilhar em outros sites
Isai    0

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora