Como faço para esticar uma imagem de plano de fundo para cobrir todo o elemento HTML?

Estou tentando obter uma imagem de plano de fundo de um elemento HTML (corpo, div, etc.) para esticar toda a sua largura e altura.

Não tendo muita sorte. É mesmo possível ou tenho que fazer de outra forma além de ser uma imagem de fundo?

Meu css atual é:

body {
    background-position: left top;
    background-image: url(_images/home.jpg);
    background-repeat: no-repeat;
}

Desde já, obrigado.

Edit: Não estou interessado em manter o CSS na sugestão de Gabriel, então estou mudando o layout da página. Mas essa parece ser a melhor resposta, então estou marcando como tal.

<style>
    { margin: 0; padding: 0; }

    html { 
        background: url('images/yourimage.jpg') no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
</style>

Use a background-sizepropriedade: http://www.w3.org/TR/css3-background/#the-background-size

Em suma, você pode tentar isso ....

<div data-role="page" style="background:url('backgrnd.png'); background-repeat: no-repeat; background-size: 100% 100%;" >

Onde usei poucos css e js ...

<link rel="stylesheet" href="css/jquery.mobile-1.0.1.min.css" />
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.mobile-1.0.1.min.js"></script>

E está funcionando bem para mim.

Não tenho certeza se esticar uma imagem de fundo é possível. Se você achar que não é possível ou não é confiável em todos os seus navegadores de destino, você pode tentar usar uma tag img esticada com z-index definido para baixo e posicionar definido como absoluto para que outro conteúdo apareça em cima dela.

Nos informe do que você acabar fazendo.

Edit: O que eu sugeri é basicamente o que está no link de Gabriel. Então tente isso :)

Para expandir a resposta @PhiLho, você pode centralizar uma imagem muito grande (ou de qualquer tamanho) em uma página com:

{ 
background-image: url(_images/home.jpg);
background-repeat:no-repeat;
background-position:center; 
}

Ou você pode usar uma imagem menor com uma cor de fundo que corresponda ao fundo da imagem (se for uma cor sólida). Isso pode ou não atender aos seus objetivos.

{ 
background-color: green;
background-image: url(_images/home.jpg);
background-repeat:no-repeat;
background-position:center; 
}

Se você precisar esticar sua imagem de fundo ao redimensionar a tela e não precisar de compatibilidade com versões mais antigas do navegador, isso fará o trabalho:

body {
    background-image: url('../images/image.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

Se você tiver uma imagem grande de paisagem, este exemplo aqui redimensiona o fundo no modo retrato, para que seja exibido na parte superior, deixando em branco na parte inferior:

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

body {
    background-image: url('myimage.jpg');
    background-position-x: center;
    background-position-y: bottom;
    background-repeat: no-repeat;
    background-attachment: scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

@media screen and (orientation:portrait) {
    body {
        background-position-y: top;
        -webkit-background-size: contain;
        -moz-background-size: contain;
        -o-background-size: contain;
        background-size: contain;
    }
}

O código a seguir eu uso principalmente para alcançar o efeito solicitado:

body {
    background-image: url('../images/bg.jpg');
    background-repeat: no-repeat;
    background-size: 100%;
}

background: url(images/bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

Você não pode em CSS puro. Ter uma imagem cobrindo toda a página atrás de todos os outros componentes é provavelmente sua melhor aposta (parece que essa é a solução fornecida acima). De qualquer forma, é provável que pareça horrível de qualquer maneira. Eu tentaria uma imagem grande o suficiente para cobrir a maioria das resoluções de tela (digamos até 1600x1200, acima dela é mais escassa), para limitar a largura da página, ou apenas usar uma imagem nesse bloco.

imagem{

background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding: 0 3em 0 3em; 
margin: -1.5em -0.5em -0.5em -1em; 
  width: absolute;
  max-width: 100%; 

Basta fazer um div para ser o filho direto do corpo (com o nome de classe bg, por exemplo), abrangendo todos os outros elementos no corpo, e adicionar isso ao arquivo CSS:

.bg {
    background-image: url('_images/home.jpg');//Put your appropriate image URL here
    background-size: 100% 100%; //You need to put 100% twice here to stretch width and height
}

Consulte este link: https://www.w3schools.com/css/css_rwd_images.asp Role para baixo até a parte que diz:

2. Se a propriedade background-size for definida como "100% 100%", a imagem de fundo será esticada para cobrir toda a área de conteúdo

Lá ele mostra o 'img_flowers.jpg' estendendo-se para o tamanho da tela ou do navegador, independentemente de como você o redimensiona.

Funciona para mim

.page-bg {
  background: url("res://background");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}