[CSS] esticar/encolher uma imagem como background

S

spastikman

Banido
Boas,

Tenho uma imagem com uma resolução de 1600x1200 que pretendia usar como background de uma página que estou a fazer.

Gostava que a imagem esticasse/encolhesse consoante a resolução utilizada pelas pessoas.

Ou seja, independentemente da resolução utilizada pelos utilizadores, gostaria que a imagem ficasse sempre completamente visível sem áreas cortadas.


É possível ?
 
O tamanho da janela do browser está ligado à resolução que usam
Clicar para expandir...
Não está não. Por exemplo: a resolução aqui nesta box é 2560x1024; no entanto o tamanho da janela do browser que costumo utilizar é 1280x1024.

No meu caso, com a tua imagem (para a resolução do meu monitor) ficaria com 2560x1920. Por outro lado, se for pelo tamanho da janela, no meu caso, a tua imagem ficaria com 1280x960 (e faltavam-lhe uns pixels em baixo...). Em qualquer das situações parece-me que o background (com as medidas que tens) ficaria distorcido.
 
Não sei até que ponto isso ficará bem a nível estético..

Porque não te esqueças q nos monitores Wide a imagem vai esticar mais horizontalmente do que verticalmente..
 
slack_guy disse:
Não está não. Por exemplo: a resolução aqui nesta box é 2560x1024; no entanto o tamanho da janela do browser que costumo utilizar é 1280x1024.

No meu caso, com a tua imagem (para a resolução do meu monitor) ficaria com 2560x1920. Por outro lado, se for pelo tamanho da janela, no meu caso, a tua imagem ficaria com 1280x960 (e faltavam-lhe uns pixels em baixo...). Em qualquer das situações parece-me que o background (com as medidas que tens) ficaria distorcido.
Clicar para expandir...


Se aumentas a resolução da box, o tamanho da janela do browser também vai aumentar ( a área visível de uma página vai ser maior) é nisto que me refiro quando digo que estão ligadas.

De qualquer modo, o Hype falou noutro problema do qual ainda não me tinha lembrado.


Falando mais concretamente do meu problema, eu tenho uma imagem de uma mulher que gostaria de colocar como fundo. A mulher encontra-se ao lado esquerdo, e o background dessa imagem é gradiente preto (mais claro da esquerda para a direita).

Eu posso extrair a imagem da mulher, e fazer o gradiente com CSS (controlando uma layer preta e uma branca sobrepostas e a respectiva opacidade), mas vou continuar com o problema do tamanho da mulher ...

Como resolver isto de forma a que se adapte a varias resoluções ?
 
A meu ver e segundo o que percebi a melhor solução era utilizar a imagem da mulher a parte do fundo.

Punhas a imagem da mulher num tamanho (em altura) que seja a nível geral standart, e utilizando um div colocarias por cima do fundo que queres.

Em relação ao fundo poderias então utilizar a solução que já apresentas-te.
 
Inicie sessão ou registe-se para poder participar.
Back
Topo