¿Cómo estiro una imagen de fondo para cubrir todo el elemento HTML?

Estoy tratando de obtener una imagen de fondo de un elemento HTML (cuerpo, div, etc.) para estirar todo su ancho y alto.

No tengo mucha suerte. ¿Es posible o tengo que hacerlo de otra manera además de ser una imagen de fondo?

Mi CSS actual es:

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

Gracias por adelantado.

Editar: No estoy interesado en mantener el CSS en la sugerencia de Gabriel, así que cambiaré el diseño de la página. Pero esa parece la mejor respuesta, así que la estoy 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>

Utilice la background-sizepropiedad: http://www.w3.org/TR/css3-background/#the-background-size

En resumen, puedes probar esto ...

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

Donde he usado pocos css y 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>

Y me está funcionando bien.

No estoy seguro de que sea posible estirar una imagen de fondo. Si encuentra que no es posible, o que no es confiable en todos sus navegadores de destino, puede intentar usar una etiqueta img estirada con un índice Z más bajo y una posición establecida en absoluto para que aparezca otro contenido encima.

Háganos saber lo que termina haciendo.

Editar: Lo que sugerí es básicamente lo que está en el enlace de Gabriel. Así que prueba eso :)

Para expandir la respuesta de @PhiLho, puede centrar una imagen muy grande (o una imagen de cualquier tamaño) en una página con:

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

O puede usar una imagen más pequeña con un color de fondo que coincida con el fondo de la imagen (si es un color sólido). Esto puede o no adaptarse a sus propósitos.

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

Si necesita estirar su imagen de fondo mientras cambia el tamaño de la pantalla y no necesita compatibilidad con versiones anteriores del navegador, esto hará el trabajo:

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

Si tiene una imagen de paisaje grande, este ejemplo cambia el tamaño del fondo en modo vertical, de modo que se muestre en la parte superior, dejando en blanco la 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;
    }
}

El siguiente código que utilizo principalmente para lograr el efecto 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;

No se puede en CSS puro. Tener una imagen que cubra toda la página detrás de todos los demás componentes es probablemente su mejor opción (parece que esa es la solución dada anteriormente). De todos modos, lo más probable es que se vea horrible de todos modos. Intentaría con una imagen lo suficientemente grande para cubrir la mayoría de las resoluciones de pantalla (digamos que hasta 1600x1200, arriba es más escasa), para limitar el ancho de la página, o simplemente para usar una imagen en ese mosaico.

imagen{

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%; 

Simplemente haga que un div sea el hijo directo de body (con el nombre de clase bg por ejemplo), que abarque todos los demás elementos del cuerpo, y agréguelo al archivo 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 enlace: https://www.w3schools.com/css/css_rwd_images.asp Desplácese hacia abajo hasta la parte que dice:

2. Si la propiedad de tamaño de fondo se establece en "100% 100%", la imagen de fondo se ampliará para cubrir toda el área de contenido.

Allí muestra el 'img_flowers.jpg' que se extiende hasta el tamaño de la pantalla o el navegador, independientemente de cómo lo cambie.

Esto funciona para mi

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