Como fazer a imagem de fundo aparecer certo para todas as resoluções?

Marcus Marinho · 7 de março de 2010

Pessoal,

estou fazendo um site onde necessito colocar uma imagem degrade de fundo(Parte mais escura em cima e mias esbranquiçada pra baixo). Até ai, tudo bem. Mas estou colocando uma imagem onde, no meu computador, que tem uma resolução 1024 x 768, fica normal, no que diz respeito ao tamanho da pagina do site. Se eu diminuir a resolução, a imagem de fundo aparece até a metade e recomeça logo em seguida, ou seja, vai esbranquiçando até o meio e logo já começa a parte escura novamente.

Minha pergunta é: Como eu posso resolver isso para ajustar o fundo da página para abrir igual em todas as resoluções?

abraços e muito obrigado pela ajuda.

Maquinho

nicolas.tanski · 8 de março de 2010

Olá, em vez de utilizar valores fixos no seu background você pode usar procentagens (%), mas no seu caso o seu background está se repetindo, então terá que colocar no seu CSS o seguinte código, por exemplo:

fundo {
background-image: url(imagens/fundo.gif)

background-repeat: no-repeat

}

Se isto não funcionar dê uma olhada neste site que tem muitas coisas sobre este assunto e sobre CSS, http://maujor.com/tutorial/backtut.php

Falou!

Marcus Marinho · 10 de março de 2010

Valeu.. irei tentar isso.. mas eu não estou usando CSS... Vou tentar isso que você falou, mas por curiosidade, será que teria como resolver isso no HTML ou no próprio Front page mesmo ?

abraços e valeu mesmo !

nicolas.tanski · 10 de março de 2010

O que tu pode fazer é em vez de criar um arquivo .CSS para fazer as configurações da sua página você poderia incluir o código CSS juntamente com o seu código HTML, por exemplo:

<html>
<head>

<title></title>

<style type="text/css">

#fundo {

background-image: url(imagens/fundo.gif)

background-repeat: no-repeat

}

</style>

</head>

</html>

Eu desconheço outro modo de fazer essa configuração sem ser por CSS, mas quem sabe alguém do fórum pode te ajudar também.

Falou!

Marcus Marinho · 10 de março de 2010

Fala ai..

eu tentei fazer o que você falou, mas infelizmente não resolveu o problema. Acredito que resolveria se a minha imagem estivesse se repetindo para o lado e não para baixo. Mas de qualquer forma, anexei uma imagem do que está acontecendo com o fundo do site. Note que, o que estou querendo é qu~e a parte esbranquiçada fiquei no final da pagina e não no meio.

Valeu mesmo pela ajuda.

FBBNENAS · 11 de março de 2010

Seguinte você pode resolver isso usando table pois se você apenas jogar na tg background a imagem irá ocupar todo o tamanho da resolução e se ela for maior automaticamente ela irá se replicar para ocupar o espaço restante.

Usando table você irá centralizar essa tabela e irá dimensionar-la como melhor lhe atender.

vamos pro código que fica mais explicado

<html>
<head>
<titlle> Exemplo </title>
</head>
<body>
  <center>
     <table border="0" cellpadding="0" cellspacing="0" width="1280" background="/fundo.gif">
        <tr>
             <td> 
                .
                .
                .
             </td>
        </tr>
      </table>
   </center>
</body>
</html>