Background Alinhamento de Background

[Marylia 0]

Preciso que o background da continuação do topo e do rodapé fique 1 na esquerda e outro na direita, o que acontece que quando declaro repeat-x no primeiro da esquerda ele vai até o fim do outro lado da página, quero que fiquei um de cada lado da página:

 

body {

background-image: url(../images/bg-left-top.jpg) , url(../images/bg-right-top.jpg) , url(../images/bg-right-bottom.jpg) , url(../images/bg-left-bottom.jpg) ;

background-repeat: repeat-x, repeat-x, repeat-x, repeat-x;

background-position: left 50px, right 50px, bottom right, bottom left;

}

Alguém poderia me ajudar a alinhar isso?

Desde já agradeço!

[L. Henrique 179]

Você precisa que o background se repita da header até o footer? Se for isso, troque repeat-x por repeat-y.
Fiz uns testes no JSFiddle e correu tudo ok, veja aqui a DEMO.

[Marylia 0]

Não, eu tenho uma imagem no header que ela precisa ser continua dos 2 lados porém cada lado da tela é uma imagem, tem que repetir em x, mas o tamanho é de 100px de altura entende, não pega a tela inteira, ela só está aparecendo a do lado esquerdo, a do outro lado fica abaixo, tem como enviar imagem por aqui? Pra poder visualizar melhor o que quero dizer?

 

Obrigada.

[leonardo de andrade baessa 16]

Não seria mas prático criar 2 div diferentes. com os respectivos fundos e sobrepor o conteúdo?

[Marylia 0]

Pensei nisso, mas as imagens precisam ser no body, para serem responsivas.

[leonardo de andrade baessa 16]

creio que não cara; só criar um layout adequando eles.

[Marylia 0]

Não seria mas prático criar 2 div diferentes. com os respectivos fundos e sobrepor o conteúdo?

Obrigada Leonardo! eu consegui fazer com as 2 divs mesmo e coloquei position absolute deu certo.

 

Agora aconteceu outro problema, nas páginas que possui uma tabela, essas divs do rodapé não ficam no final da página.

[Maujor 144]

Oi Marylia,

É preciso mais informações para ajudá-la com a solução.

1-) Quais são as dimensões das imagens que se repetem nos lados do topo e do rodapé?
2-) Entendo que a imagem não é uma cor sólida e sim uma paisagem, ou foto que se repete para os lados. Certo?
3-) Como o site é responsivo então há uma "sobra" para os lados do topo e rodapé que você quer preencher com uma imagem repetida. O topo é rodapé têm uma largura máxima (qual é?).
4-) A partir de uma largura de viewport não há mais "sobras" laterais (qual é esta largura?)

Sem estas informações é difícil apontar uma solução.

[Marylia 0]

Ah sim obrigada, então segue mais detalhado:

 

Troquei a imagem por uma cor sólida as divs que se repetem ao lado do topo.

O site não está responsivo, somente o topo e o rodapé mesmo.

 

Eu consegui arrumar essa parte, porém há uma tela que existe uma div e dentro uma tabela, nessa página, essas novas divs que criei para a repetição para o rodapé, não fica no fim da página.

 

O código está assim:

(do topo)

<div class="bg-header-left"></div>

<div class="bg-header-right"></div>

(do meio)

<div id="container">

<div class="resultados">

<table width="941" border="0" align="center" class="linhasAlternadas">

<tr align="center" valign="middle" class="even">

<td width="203" height="30" align="center">Campanha</td>

<td width="193" height="30" align="center">Line Number</td>

<td width="200" height="30" align="center">Atualizado Por</td>

<td width="222" height="30" align="center">Data Atualização</td>

<td width="101" height="30" align="center">Ação</td>

</tr>

<tr>

<td align="center">18/215</td>

<td align="center">781736</td>

<td align="center">Xaviera</td>

<td align="center">10/28/2015 - 18:00</td>

<td align="center"><div class="bt-editar"><a href="#">Excluir</a></div></td>

</tr>

<tr>

<td align="center">18/215</td>

<td align="center">781736</td>

<td align="center">Xaviera</td>

<td align="center">10/28/2015 - 18:00</td>

<td align="center"><div class="bt-editar"><a href="#">Excluir</a></div></td>

</tr>

<tr>

<td align="center">18/215</td>

<td align="center">781736</td>

<td align="center">Xaviera</td>

<td align="center">10/28/2015 - 18:00</td>

<td align="center"><div class="bt-editar"><a href="#">Excluir</a></div></td>

</tr>

<tr>

<td align="center">18/215</td>

<td align="center">781736</td>

<td align="center">Xaviera</td>

<td align="center">10/28/2015 - 18:00</td>

<td align="center"><div class="bt-editar"><a href="#">Excluir</a></div></td>

</tr>

<tr>

<td align="center">18/215</td>

<td align="center">781736</td>

<td align="center">Xaviera</td>

<td align="center">10/28/2015 - 18:00</td>

<td align="center"><div class="bt-editar"><a href="#">Excluir</a></div></td>

</tr>

<tr>

<td align="center">18/215</td>

<td align="center">781736</td>

<td align="center">Xaviera</td>

<td align="center">10/28/2015 - 18:00</td>

<td align="center"><div class="bt-editar"><a href="#">Excluir</a></div></td>

</tr>

</table>

</div>

</div>

<!-- fim main-->

<div id="footer"><img src="images/footer.jpg" width="1003" height="40" /></div>

</div>

(do rodapé)

<div class="bg-footer-left"></div>

<div class="bg-footer-right"></div>

(css bg)

.bg-header-left{

background-color:#fa3a63;

background-repeat:repeat-x;

width:480px;

height:55px;

background-position:left 50px;

position:absolute;

left: -2px;

top: 50px;

}

.bg-header-right{

background-color:#f3f3f3;

background-repeat:repeat-x;

z-index:9999;

width:50%;

height:55px;

background-position:right 100px;

position:absolute;

left: 955px;

top: 50px;

}

.bg-footer-left{

background-color:#363636;

background-repeat:repeat-x;

width:480px;

height:40px;

background-position: bottom left;

position:absolute;

left: -4px;

bottom:0px;

z-index:1;

}

.bg-footer-right{

background-color:#000;

background-repeat:repeat-x;

z-index:9999;

width:940px;;

height:40px;

background-position:bottom right;

position:absolute;

left: 962px;

bottom: 0px;

}

#container{

width:1000px;

margin:0 auto;

min-height: 100%;

position: relative;

}

.resultados{

float:left;

height:800px;

margin:50px 0 0 30px;

}

table.linhasAlternadas {

border-collapse: collapse; /* CSS2 */

background: #FFF;

height:50px;

float:left;

clear:both;

font-size:12px;

color:#333;

text-align: center;

}

table.linhasAlternadas tr:nth-child(even) /* CSS3 */ {

background-color:#f4f4f4;

border-bottom: 1px solid #f4f4f4;

height:50px;

}

#container .main .resultados .linhasAlternadas .even td {

font-size: 16px;

}

#footer{

position: absolute;

bottom: 0;

z-index:9999;

}

[Maujor 144]

Você pode usar gradiente como imagens de fundo do elemento BODY para completar as laterais do topo e rodapé com cores sólidas.

Veja um exemplo em https://jsfiddle.net/maujor/mhL5rass/

 

Para saber mais sobre gradientes consulte este tutorial no site do Maujor.

[Marylia 0]

Você pode usar gradiente como imagens de fundo do elemento BODY para completar as laterais do topo e rodapé com cores sólidas.

 

Veja um exemplo em https://jsfiddle.net/maujor/mhL5rass/

 

Para saber mais sobre gradientes consulte este tutorial no site do Maujor.

 

Obrigada pela dica!!! vou usar :)

 

Agora sobre o problema do alinhamento do rodapé na página que possuí uma tabela ainda nao consegui arrumar :(