lucazbrandao

Poxa, deu na mesma aqui.. descobri que o problema realmente é por causa do repeat-y, ele tá fazendo a imagem ficar um pouco borrada, e dando essa impressão de desalinhamento do menu.. Tô pensando em criar alguns tamanhos de background fixos e colocar em cada página o tamanho que for necessário kkkk (muita gambiarra).

Olá comunidade, No site que estou desenvolvendo eu criei um background com 3 imagens, top, bottom e center, ambas tem 1920 de largura. Meu código: body { width: 100%; background: url(../images/top-fon-bg.jpg) top center no-repeat, url(../images/bottom-fon-bg.jpg) bottom center no-repeat, url(../images/fon-repeat.jpg) center repeat-y; background-color: #000000; font-family: Tahoma, Arial, sans-serif; font-size: 12px; color: #7d7d7d; line-height: 1; min-height: 100vh; } O problema é que a imagem do centro não fica centralizada, parece que ela se move 1 pixel pro lado. Alguém sabe o que pode ser? Obrigado.

Salve T-Rexz, eu notei que esse bug só ocorre em algumas resoluções, a minha é 1920x1080 (usando o chrome) e ocorre, em algumas menores não ocorre. Reproduzindo algo parecido com o seu exemplo que me veio na cabeça aqui, eu percebi uma coisa.. O comando repeat-y tá distorcendo um pouco a qualidade da imagem (não faço ideia do motivo), fazendo ocorrer esse mini bug.. No meu projeto, eu criei o background inteiro do site no photoshop, que tem esse menu com a borda dourada, nesse exemplo da imagem é o encontro da imagem do topo com a do meio... Eu separei o background em três partes (as 3 possuem um pedaço do menu dourado), uma top (cabeçalho), bottom(rodapé) e esta 'fon-repeat' no centro, que vai se multiplicando em cada página em uma quantidade diferente, pois as páginas não tem o mesmo tamanho..