Publicado em 4 de nov.

Alinhamento de Background

#css #desenvolvimento-frontend #alinhamento #background #multiplos

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!

Discussão (10)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

L. Henrique· 5 de nov.

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· 6 de nov.

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· 6 de nov.

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

Marylia· 10 de nov.

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

leonardo de andrade baessa· 10 de nov.

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

Marylia· 11 de nov.

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· 11 de nov.

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· 12 de nov.

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· 12 de nov.

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· 12 de nov.

>
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 :(