Como esticar imagem de fundo com CSS

Há algumas plugins jQuery que ajudam a esticar imagem de fundo no corpo ou outros elementos HTML. Não é uma tarefa difícil fazer que uma imagem de fundo cobrir um elemento HTML com a ajuda de JavaScript. Mas em CSS?

É possível esticar a imagem usando apenas CSS? Felizmente, é possível!

Para que a imagem seja alterada em função do tamanho da janela (viewport), ela deve ter uma regra de CSS, a propriedade «background» que define as características (os valores na regra CSS) do fundo dos elementos HTML.

As propriedades «background» são as listadas abaixo:

• background-color – cor do fundo;
• background-image – imagem de fundo;
• background-repeat – maneira como a imagem de fundo é posicionada;
• background-attachment – se a imagem de fundo faz scroll ou não;
• background-position – como e onde a imagem de fundo é posicionada;
• background – maneira abreviada para todas as propriedades;

Então se queremos esticar imagem de fundo no elemento HTML devemos usar a propriedade CSS «background-size» com valor de «cover» ou «100%» que vai indicar o tamanho do fundo. Também devemos utilizar o «position:fixed;» para o fundo não fazer «scroll» junto ao conteúdo, caso o conteúdo tenha altura maior que o «viewport».

Assim, para que o fundo alcance as dimensões que queremos, independente do tamanho do «viewport», utilizamos o seguinte:

body {
    background: url(image.jpg) fixed no-repeat;
    -webkit-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}

Ou:

body {
    background-image: url(imagem.png);
    background-repeat: no-repeat;
    background-attachment: fixed;
    /* e agora a regra de ouro que fará a imagem ocupar todo o viewport */
    background-size: 100% 100%;
}

Veja o exemplo que criamos para o efeito: CSS: como usar propriedades «background»

Temos de ter em conta que o «background-size» possivelmente não vai funcionar em todos os navegadores, principalmente nos mais antigos.

E você gostou da ideia? Já usa esta regra CSS? Comente!

Um abraço e até breve!