Jump to content
Fórum Script Brasil
  • 0

(Resolvido) Fundo com 2 imagens


lkm

Question

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

Link to comment
Share on other sites

7 answers to this question

Recommended Posts

  • 0

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

Edited by hipnos na area
Link to comment
Share on other sites

  • 0

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>

Edited by hipnos na area
Link to comment
Share on other sites

  • 0

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>

Link to comment
Share on other sites

  • 0

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>

<table width="100%" id="table_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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



  • Forum Statistics

    • Total Topics
      152k
    • Total Posts
      651.5k
×
×
  • Create New...