Jump to content

imagem de fundo + resolução de ecrao


Nuno

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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. 🙂

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.