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

insertar imagen html url

Question

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

No teniendo 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 estoy cambiando el diseño de la página. Pero esa parece ser la mejor respuesta, así que lo estoy marcando como tal.

Answer 1

El siguiente código que uso principalmente para lograr el efecto solicitado:

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

Answer 2

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 está funcionando bien para mí.

Answer 3

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. Entonces inténtalo :)

Answer 4

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 5

Para ampliar la respuesta de @PhiLho, puede centrar una imagen muy grande (o cualquier tamaño de imagen) 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; 
}

Answer 6

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

Answer 7

Si tiene una imagen de paisaje grande, este ejemplo aquí cambia el tamaño del fondo en modo retrato, de modo que se 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 8

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

Answer 9

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

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;