Imagem de fundo: problema de repeat-y apenas na visualização da lista de categorias

Usando o código de Dax code com background-repeat definido como “repeat-y”, coloquei uma imagem de alta resolução de uma folha de papel em branco no Imgur, que redimensionei para 1920x1440 antes de fazer o upload. O comportamento parece normal à primeira vista, exceto na visualização da Lista de Categorias, que não escala a imagem e/ou não a repete verticalmente. No entanto, notei que, ao diminuir o zoom na visualização da Categoria, em que a imagem de fundo parecia estar sendo escalada, ela também parou de escalar depois que diminuí o zoom para 75%.

Quanto ao problema dos cabeçalhos, confio plenamente que não é possível corrigi-lo. Sem problemas quanto a isso. Na verdade, duvido que vá usar esse recurso de imagem de fundo, mas quis apontá-los de qualquer forma.

Edição: a visualização do tópico de postagem parece estar funcionando normalmente, conforme mostrado abaixo. Cores estranhas porque estou testando apenas a viabilidade no momento (o site ainda não está no ar). O problema dos cabeçalhos, conforme mencionado acima, é provavelmente o principal motivo pelo qual vou evitar usar uma imagem (além da legibilidade do texto em certas situações).

1 curtida

Acho que, como o conteúdo é curto nessa página, o #main não está ocupando 100% da altura da janela. O fundo preenche a página inteira se você adicionar #main { height: 100vh; }? Você também pode mover a imagem de fundo para a tag HTML.

3 curtidas

Isso resolveu! Obrigado, TWICE, por duas correções hoje! :grin:

Uma nota sobre o comportamento: 100vh não fez nada e 1000vh fez a barra de rolagem se comportar de forma indesejada (ela rolaria para baixo no vazio). 200 também parecia muita distância de rolagem, então eu aumentei aos poucos em incrementos de 10. Curiosamente, o fundo não se replicou, fazendo com que o fundo bege (normal) reaparecesse na parte inferior. Isso se manteve até eu chegar a 140vh.

1 curtida