(Resolvido) Background-image no css

bruno bpS · Agosto 3, 2010

Ola pessoas ;D

Seguinte, estou fazendo uma especie de "atalhos" no top da pagina... dai eu fiz uma div com as seguintes configurações no CSS:

.top0 {
    margin-left:-10px;
    margin-right:-20px;
    margin-top:-10px;
    background-image: url(../imagens/top_0.png);
    height: 30px;
    }

Dai coloquei a div:

<div class="top0" id="top"></div>

A div fica em branca... não aparece a imagem :S :S., alguém sabe como resolver??, vlws ;D

*FIT* · Agosto 3, 2010

A imagem realmente se encontra no local especificado?

Caso sim e mesmo assim não apareça, troque:

background-image: url(../imagens/top_0.png);

por

background: url(../imagens/top_0.png);

Confira também se não tem nenhuma outra configuração nessa div, pois além da classe ela tem um id também.

bruno bpS · Agosto 3, 2010

Olha eu troquei e não deu certo!

Sim a imagem ta ali sim. '-'

olha o codigo da pagina inteira:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="shortcut icon" href="favicon.ico" >
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="google-site-verification" content="VbMYLhqTTdtK2YtZE_YODXqq7G-1NjjF0ANYMI5s14c" />
<title>:: Perfect World Loko ::</title>
<META NAME='revisit-after' CONTENT='ultima atualização'>
<META NAME='keywords' CONTENT='Perfect World Loko, Perfect World, MMORPG, Multplayer, Online, PWLoko, PW, Lokogames, Loko'>
<META NAME='description' CONTENT='Perfect World loko, servidor privado de Perfect World, Jogo Online, PWLoko, LokoGames'>
<META NAME='author' CONTENT='Diahn'>
<META NAME='copyright' CONTENT='Loko Games'>
<META NAME='language' CONTENT='Portuguese'>
<META NAME='ROBOTS' CONTENT='ALL'>
<link href="css/templates.css" rel="stylesheet" type="text/css" />
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<link href="css/all.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="top0" id="top"></div>
<br />
</body>
</html>

E do css:

@charset "utf-8";
/* CSS Document */

.top0 {
    margin-left:-10px;
    margin-right:-20px;
    margin-top:-10px;
    height: 30px;
    background: url(../imagens/top_0.png);
    }

*FIT* · Agosto 3, 2010

Então, mas ela recebe alguma outra configuração pelo ID?

mesmo porque a página está importando 3 arquivos css.

bruno bpS · Agosto 3, 2010

Mas tipo, nos 3 css, só o templates.css tem coisa escrita ainda.. akabei de começar do zero isso :S :S

Eai o que pod ser? :S

*FIT* · Agosto 3, 2010

Bom, na verdade é muito estranho, tem esse site hospedado em algum servidor para que eu possa debugar na firebug?

Assim fica muito mais fácil encontrar uma solução.

bruno bpS · Agosto 3, 2010

http://pwloko.com.br/teste/default.html

http://pwloko.com.br/teste/css/

http://pwloko.com.br/teste/css/templates.css

http://pwloko.com.br/teste/css/all.css

http://pwloko.com.br/teste/css/styles.css

http://pwloko.com.br/teste/imagens/top_0.png

Isso é as unica coisa que uza na pagina...

Espero que dê certo '-'

_Vinny_ · Agosto 3, 2010

Se olhar no CSS da DIV, não tem

background: url(../imagens/top_0.png);

Logo não será exibido na página. =/

Matheus Matos · Agosto 4, 2010

A div está sem conteudo! :P

Tente colocar um lorem ipsum nela pra você ver se o background não aparece correndo!

<div class="top0" id="top"><p>lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet </p></div>

Agora pega! :D

Para que ela fosse exibida sem conteudo nenhum, você precisaria definir um width e um height para ela, só que para isso ela teria que ter um floot ou position: absolute/fixed.

Teste aí.

Abraços

Matheus Matos

P.S: Eitha! Como o vinny falou realmente não está linkado no css. Apenas uma div com classe .topprime

E outra dica, utilize CSS Resets, assim não precisa ficar margeando divs por divs. Saiba mais googleando e tenha exemplos aqui.

Editado Agosto 4, 2010 por Matheus Matos

bruno bpS · Agosto 4, 2010

testei e ainda não deu certo :S , já arrumei o "linkado"

Vou upar de novo para mostrar pra vocês!

http://pwloko.com.br/teste/default.html

http://pwloko.com.br/teste/css/

http://pwloko.com.br/teste/css/templates.css

http://pwloko.com.br/teste/css/all.css

http://pwloko.com.br/teste/css/styles.css

http://pwloko.com.br/teste/imagens/top_0.png

ta ai.

Editado Agosto 4, 2010 por bruno bpS

_Vinny_ · Agosto 4, 2010

Você quer assim:

bruno bpS · Agosto 5, 2010

+/- isso, só não quero esse texto ai hWUQHWUUHWQ, mas é isso mesmo, é uma especie de "barra de atalhos rapidos" que vai estar em todas as paginas do site ;S

_Vinny_ · Agosto 5, 2010

Pega o CSS e altera pra isso:

@charset "utf-8";
.top0/* CSS Document */

 {
    margin-left:-10px;
    margin-right:-10px;
    margin-top:-10px;
    height: 30px;
    background: url(../imagens/top_0.png) repeat-x bottom;

}

Ficaraá assim:

bruno bpS · Agosto 5, 2010

P utz deu certin vlw!

Pod me explicar qual era o erro??

_Vinny_ · Agosto 5, 2010

A posição da imagem estava fora do alcance da tela com o margin-top:-10px;, o bottom faz com que a imagem fica no final da DIV

bruno bpS · Agosto 5, 2010

Hun,,

vlw cara ;D

Entrar

(Resolvido) Background-image no css

Pergunta

Link para o comentário

Compartilhar em outros sites

15 respostass a esta questão

Posts Recomendados

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

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

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

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

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