Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Meela

Imagens com repeat-x não acompanham a rolagem da tela

Por , em Desenvolvimento frontend

Recommended Posts

Meela    0

Meela
Postado

Oi gente.

Tenho um site que tem o header e o footer com imagens que devem se repetir na largura. Tratei isso com repeat-x e funcionou ok numa resolução wide.

 

O problema acontece quando redimensiono o browser, e então a imagem se repete até a largura inicial da página. Depois da rolagem ela não continua. Segue a imagem:

wrong.jpg

 

Como posso consertar esse problema?

 

Segue um link pra visualizar melhor o código.

 

 

*O .css está meio bagunçado ainda.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Leo.se    0

Leo.se
Postado

Cria a div centralizador'abaixo do body'

E antes de fechar o body fecha a div

 

<body>
<div id="centralizador"><!-- inicio div centralizador -->

<div id="all">
<div id="header">
....



</div><!-- fim div centralizador -->
</body>
...

 

 

Já no css adicione:

#centralizador{
margin:0 auto;
width:1400px; /* largura da página aqui */
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Diéssica    140

Diéssica
Postado

Provavelmente vai dar problema com o menu (acho que com o rodapé também), mas daí é só tu fazer uma div centralizada só pra ele ou ir trabalhando só com os fundos, sem mudar o código :)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Meela    0

Meela
Postado

Leo, fiz o que você falou, mas agora fica uma rolagem.

Não sei se o problema é do header/rodapé, como a Diéssica falou, ou se é da página inteira. Tentei centralizar essas divs, colocar scroll como hidden, mas também não deu certo...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Diéssica    140

Diéssica
Postado

É sim :P

 

Olha aí:

35izu2v.jpg

 

O header e o rodapé tão sendo limitados pela largura fixa da div pai do site...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Meela    0

Meela
Postado

Hm, é verdade, agora consegui ver.

 

Mas como posso fazer pra que o header e o rodapé fiquem com o fundo ocupando todo o browser, inclusive no caso da tua resolução, Diéssica?

Porque deveria ser só o repeat-x, mas daí ele cria a rolagem, né.

Compartilhar este post

Link para o post
Compartilhar em outros sites

NetBoy16    72

NetBoy16
Postado

E tentou utilizar das propriedades min-width e max-width pra "setar" um limite ?

 

 

PS:legal, você tb eh de ctba :grin:

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

Na minha visualização tá OK. Mas pq você não coloca o degradê superior como plano de fundo do BODY e o inferior como plano de fundo do rodapé??

Compartilhar este post

Link para o post
Compartilhar em outros sites

Diéssica    140

Diéssica
Postado 

body {
background-image: url(sua imagem);
background-repeat: repeat-x;
background-position: top;
}

Ou melhor:

body {
background: url(sua imagem) repeat-x top;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Henrique Barcelos    290

Henrique Barcelos
Postado

Não recomendo esconder o scroll.

Imagine que alguém vai acessar seu site de um netbook ou um smartphone, como ele irá visualizar todo o site?

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito