(Resolvido) Fundo com 2 imagens

lkm · Novembro 24, 2007

tenho que colocar 2 imagens de fundo em uma página e tem que ser em CSS.

1 delas é um jpg que fica no topo e se repete no eixo X e a outra seria um gif que fica centralizada na página e se repete no eixo Y

<style type="text/css">
body {
background-image: url("img/bg_top.jpg");
background-repeat: repeat-x;
background-color: #2E3C45;
}
</style>

<style type="text/css">
body {
background-image: url("img/bg_vtl.gif");
background-repeat: repeat-y;
background-position: center;
}
</style>

porém da menira que estou usando somente 1 deles aparece

hipnos na area · Novembro 24, 2007

usa uma no HTML e outra no BODY:

<style type="text/css">
html {
background-image: url("img/bg_top.jpg");
background-repeat: repeat-x;
background-color: #2E3C45;
}
</style>

<style type="text/css">
body {
background-image: url("img/bg_vtl.gif");
background-repeat: repeat-y;
background-position: center;
}
</style>

talvez no body você terá de adicionar isso: height:100%;

Vê se funciona ^^

Editado Novembro 24, 2007 por hipnos na area

lkm · Novembro 24, 2007

não funcionou

hipnos na area · Novembro 24, 2007

como não aqui eu testei e funcionou???

põe suas imagens ONLINE

bg_top.jpg

bg_vtl.gif

eu te passo um exemplo beleza

você leu esse pedaço:

talvez no body você terá de adicionar isso: height:100%;

faça assim:

<style type="text/css">
html {
background-image: url("img/bg_top.jpg");
background-repeat: repeat-x;
background-color: #2E3C45;
height:100%;
}

body {
margin:0px;
background-image: url("img/bg_vtl.gif");
background-repeat: repeat-y;
background-position: center;
height:100%;
}
</style>

Editado Novembro 24, 2007 por hipnos na area

flavio · Novembro 24, 2007

Galera, é o seguinte:

Hipnos,

Eu nunca tinha visto alguém estilizar a tag HTML. Fui atrás pra ver se realmente era permitido e, de acordo com a W3C, ela é válida pra todos os elementos.

Aí eu testei. No Opera funcionou. No IE 6, não! A biblioteca da Microsoft diz que funciona no IE mas que existem certas condições: veja a explicação em inglês

De qualquer modo, lkm, eu faria usando a tag DIV:

<style type="text/css">
#div1 {
    background-image: url("imagens/anjo.jpg");
    background-repeat: repeat-x;
    background-color: #2E3C45;
    height: 100%;
    width: 100%;
    position: absolute;
}
#div2 {
    background-image: url("imagens/anjo2.jpg");
    background-repeat: repeat-y;
    background-position: center;
    height: 100%;
    width: 100%;
    position: absolute;
}
body {
    margin: 0px;
}
</style>

<div id="div1"></div>
<div id="div2"></div>

lkm · Novembro 25, 2007

Agora sim, funcionou, com o código do flavio testei em vários navegadores e todos blza e obrigado também ao hipnos na area pelas digas.

Valeu.

hipnos na area · Novembro 25, 2007

malz flavio esqueci de postar o width =/

hehe eu já tinha lido a respeito ^^ valeu =]

quanto a você LKM recomendo que você teste seus sites nos seguintes navegadores:

mozila FF

Netscap

opera

IE7 e 6(lembre-se há muitas pessoas que o usam ainda )

r. prazim~ · Julho 31, 2012

Eu tentei o conselho do amigo acima, deu certo em partes, ficaram alguns bugs, dai, eu fiz o seguinte...

Envolvi uma tabela em todo o site... e botei um background em tal, ficou assim:

Ex.:

<html>

<body>

<tr>

<td>

NO CASO O SITE COMEÇARIA AQUI!

</td>

</tr>

</table>

</body>

</html>

body{

background:url(images/banner_esquerdo.png);

background-position:left; /* Imagem sempre ao lado esquerdo */

background-repeat:no-repeat; /* Imagem não se repete */

background-attachment:fixed; /* Imagem não se mexe com o redimensionamento da janela; */

}

#table_body{

background: url(images/banner_direito.png);

background-repeat: no-repeat; /* Imagem não se repete */

background-position: right; /* Imagem sempre ao lado direito */

background-attachment:fixed; /* Imagem sempre fixa com o redimensionamento da janela, "RECOMMENDED" sempre usar! */

}

Bem, após ter sofrido com alguns bugs referente ao antigo codigo, esse ficou bem melhor, espero que ajude.

Entrar

(Resolvido) Fundo com 2 imagens

Pergunta

lkm

Link para o comentário

Compartilhar em outros sites

7 respostass a esta questão

Posts Recomendados

hipnos na area

Link para o comentário

Compartilhar em outros sites

lkm

Link para o comentário

Compartilhar em outros sites

hipnos na area

Link para o comentário

Compartilhar em outros sites

flavio

Link para o comentário

Compartilhar em outros sites

lkm

Link para o comentário

Compartilhar em outros sites

hipnos na area

Link para o comentário

Compartilhar em outros sites

r. prazim~

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades