imagem de fundo + resolução de ecrao

[Nuno]

Boas people!

Bem tou ai com um projecto e de repente deparei-me com uma duvida que nunca tinha pensado pois ateagor todos os fundos que usei era apena com um repeat-x ou repeat-y e tava a andar. No entanto neste caso que meter uma imagem como fundo a ocupar todo o fundo mas devido ás diferentes resoluçoes de ecra de maquina para maquina penso que irei ter alguns problemas senao me engano.

a minha questão é se existe alguma instrução em CSS ou noutra linguagem que permita verificar qual a resolução que determinada máquina que acede ao site está a usar e desta forma ajustar a minha imagem a sua resolução para fcar com uma boa aparencia.

Cumps

[mix_93]

Podes sempre tentar 1920x1200, e depois no css aplicares o center ou então aplicares 100% para o fundo. No primeiro caso perdes tempo de resposta a carregar o site, no segundo qualidade de imagem.

[yoda]

Nuno,

Aconselho-te o seguinte: define a largura do site máxima, e cria uma imagem dessa largura e cria uma div sempre crntrada ao meio. Pega na imagem que criaste e certifica-te que ela termina do mesmo modo dos 2 lados. Por fim, recorta uma porção igual de um dos cantos e repete-a por trás da principal. Isto garante-te que a imagem se extenda conforme as dimensões do ecrã, sem ter problemas de qualidade ou diferenças de resposta do servidor a carregar o site.

[mix_93]

Nuno,

Aconselho-te o seguinte: define a largura do site máxima, e cria uma imagem dessa largura e cria uma div sempre crntrada ao meio. Pega na imagem que criaste e certifica-te que ela termina do mesmo modo dos 2 lados. Por fim, recorta uma porção igual de um dos cantos e repete-a por trás da principal. Isto garante-te que a imagem se extenda conforme as dimensões do ecrã, sem ter problemas de qualidade ou diferenças de resposta do servidor a carregar o site.

Ele deve querer uma imagem que ocupe todo o ecrã, e nesse caso essa hipótese não é válida.

[yoda]

Ele deve querer uma imagem que ocupe todo o ecrã, e nesse caso essa hipótese não é válida.

Tua opinião, não te esqueças de dizer essa parte.

[mix_93]

Tua opinião, não te esqueças de dizer essa parte.

Não percebi... Sinceramente ler as coisas, antes de começar com este tipo de comentários sem qualquer nexo, era bom.

No entanto neste caso que meter uma imagem como fundo a ocupar todo o fundo mas devido ás diferentes resoluçoes de ecra de maquina para maquina penso que irei ter alguns problemas senao me engano.

O meu objectivo aqui é ajudar, e não deixar comentários soltos. 🙂

[yoda]

Não percebi... Sinceramente ler as coisas, antes de começar com este tipo de comentários sem qualquer nexo, era bom.

O meu objectivo aqui é ajudar, e não deixar comentários soltos. 🙂

A sugestão que eu deu é uma sugestão mais leve para o cliente, e dá para atingir parte do objectivo, e não tem nada de "não válido", como afirmas-te. É que mesmo que se quisesse colocar uma imagem com as dimensões que deste, só uma pequena percentagem dos utilizadores do site é que teria o "privilégio" de ver toda a imagem, e no caso de quem não a conseguia ver a olho nu, tinha de a sacar na mesma para poder ver apenas parte dela. Logo, é preferível tanto para o user como para o webmaster criar uma imagem com uma dimensão que a maioria das pessoas consigam ver na integra, e repetir um fundo semelhante por trás para impedir que fiquem espaços em branco no background no site. Claro que se se optar por meter scroll no site, pode-se meter uma imagem gigante, mas isso não fica muito estético.

[mix_93]

A sugestão que eu deu é uma sugestão mais leve para o cliente, e dá para atingir parte do objectivo, e não tem nada de "não válido", como afirmas-te. É que mesmo que se quisesse colocar uma imagem com as dimensões que deste, só uma pequena percentagem dos utilizadores do site é que teria o "privilégio" de ver toda a imagem, e no caso de quem não a conseguia ver a olho nu, tinha de a sacar na mesma para poder ver apenas parte dela. Logo, é preferível tanto para o user como para o webmaster criar uma imagem com uma dimensão que a maioria das pessoas consigam ver na integra, e repetir um fundo semelhante por trás para impedir que fiquem espaços em branco no background no site. Claro que se se optar por meter scroll no site, pode-se meter uma imagem gigante, mas isso não fica muito estético.

Isso depende muito da qualidade gráfica da imagem, e das qualidades dele no tratamento da mesma. Ele tem aqui no tópico três opções válidas, portanto é só escolher a melhor.

[yoda]

Não disse que a tua opção não era válida 🙂

[Melvins]

Eu já tive essa dúvida e a solução foi ver o css dos sites em que foi aplicado. Existem vários exemplos, depende muito de que imagem se trata e qual é o objectivo. Se for o mesmo destes sites, então acho que há uma 1ª solução fácil:

www.atpworldtour.com

www.lpfp.pt

Usando o exemplo do ATP, desde a última remodelação eles utilizam uma imagem de fundo única:

http://www.atpworldtour.com/media/backgrounds/main_bg.jpg (1699x113px)

O objectivo é não repetir a imagem e ficar centrada, por isso utiliza-se uma enorme, os ecrãs menores só apanham parte da mesma (IMPORTANTE este ponto, daí que dependa do caso). De seguida é só definir o background no css do body:

body {
background:#000 url(/media/backgrounds/main_bg.jpg) no-repeat center top;
}

Tecnicamente, fundo é preto, mas com uma imagem não repetida centrada no topo.

Neste caso, é importante que os lados e a parte de baixo coincidam com a cor definida de fundo. Na imagem nota-se que essas partes já são pretas daí que não se note a transição.

Ao andar no site para baixo nota-se que deixa de haver fundo dado não repetir-se conseguindo um fundo homogéneo com uma imagem e com uma cor.

O site da LPFP usa a mesma técnica. Se for isto, praticamente é só preciso ter cuidado a ter uma parte central da imagem correcta.

Espero que tenha ajudado. 🙂

P.S.: Existe a problemática das imagens, é certo. Normalmente são imagens de 100 a 200KB. Numa ligação adsl para cima, não é dramático, mas funcionando em redes lentas pode não resultar muito bem.