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

Question

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 de antemano.

Editar: No estoy interesado en mantener el CSS en la sugerencia de Gabriel, así que estoy cambiando el diseño de la página en su lugar. Pero esa parece ser la mejor respuesta, así que lo estoy marcando como tal.

Answer 1

No estoy seguro de que sea posible estirar una imagen de fondo. Si encuentra que no es posible, o no es confiable en todos sus navegadores, puede intentar usar una etiqueta img estirada con un índice Z menor, y una posición establecida en absoluta para que el otro contenido aparezca 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 intente :)

Answer 2

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

Answer 3

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

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

o puede utilizar una imagen más pequeña con un color de fondo que coincide 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; 
} 

Answer 4

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

Answer 5

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

Answer 6

En resumen se puede probar esto ....

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

Dónde he utilizado algunas 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 está funcionando bien para mí.

Answer 7

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; 

Answer 8

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

Answer 9

El siguiente código que utilizo sobre todo para lograr el efecto preguntó:

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

Answer 10

Si necesita estirar la imagen de fondo mientras cambia el tamaño de la pantalla y no se necesita compatibilidad con versiones anteriores del navegador esto va a hacer el trabajo:

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