Background Scalable HTML CSS Javascript

StackOverflow https://stackoverflow.com/questions/2200391

Pergunta

Alguém sabe de uma maneira de ter uma escala imagem de fundo para as dimensões da janela do navegador que está em? Eu sei CSS3 permite a largura de fundo, mas eu preciso de algo mais compatível.

Muito obrigado,

Elliott

Foi útil?

Solução

Você não pode fazer isso com um background-image, como ele não suporta dimensionamento. Você tem que fingir-lo, colocando uma tag img que se estende de 100% em ambas as direções e posicioná-lo atrás de seu conteúdo usando posicionamento absoluto e z-index. Algo como isto deve funcionar: 

<body>
    <img class="bgimage" src="bgimage.jpg" />
    <div id="content">
        Your content here...
    </div>

E em CSS: 

html, body {
    min-height: 100%;
}

.bgimage {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

não testei isso, mas isso deve dar-lhe algumas entradas, pelo menos.

Outras dicas

Aqui está o truque (de http://css-tricks.com / how-to-resizeable-background-image / )

Defina sua imagem como esta: 

<body id="page-body">
    <img class="source-image" src="images/image.jpg" alt="" />
</body>

e seu CSS como este: 

#img.source-image {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
body {
    overflow: hidden;
}

Se você pretende ter uma tela muito leve é ??bom.
Mas se você pretende usar uma imagem como um fundo para uma página lotado, aqui estão algumas razões que abandonaram essa funcionalidade:

  • Alguns navegadores tiveram um tempo difícil para torná-lo rápido:. Pela primeira vez, durante os reembolsos e redimensionar a janela

  • Para cada imagem que teve que gastar muito tempo para encontrar um equilíbrio entre tamanho do arquivo e definição de imagem. Não é fácil com a base de usuários em crescimento, com telas grandes.

  • Nós ainda tentou carregar primeiro uma versão de baixa resolução da imagem, enquanto a grande era de carregamento. Ele deu um efeito muito bom, mas consumindo ainda mais recursos do navegador

Uma vez que caiu a imagem esticada, nosso aplicativo foi rápido novamente e paramos procrastinar jogando com foto;)

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top