1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.

[CSS] esticar/encolher uma imagem como background

Discussão em 'Web Development' iniciada por spastikman, 26 de Dezembro de 2007. (Respostas: 6; Visualizações: 9597)

  1. spastikman

    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 ?
     
  2. slack_guy

    slack_guy Power Member

    A resolução ou o tamanho da janela do browser? são coisas diferentes ;-)
     
  3. spastikman

    spastikman Banido

    O tamanho da janela do browser está ligado à resolução que usam, mas sim estava a falar em relação à janela do browser :P
     
  4. slack_guy

    slack_guy Power Member

    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.
     
  5. hYpe

    hYpe [email protected] Member

    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..
     
  6. spastikman

    spastikman Banido


    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 ?
     
  7. joker_josue

    joker_josue Power Member

    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.
     

Partilhar esta Página