Estirar y escalar el fondo CSS

¿Hay alguna manera de hacer que un fondo en CSS se estire o escale para llenar su contenedor?

Dec 18 '08 05:12 Lawrence Dol

Para los navegadores modernos, puede lograr esto usando background-size:

body {
    background-image: url(bg.jpg);
    background-size: cover;
}

coversignifica estirar la imagen vertical u horizontalmente para que nunca se coloque en mosaico o se repita.

Eso funcionaría para Safari 3 (o posterior), Chrome, Opera 10+, Firefox 3.6+ e Internet Explorer 9 (o posterior).

Para que funcione con versiones anteriores de Internet Explorer, pruebe estos CSS:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

Dec 21 '2010 02:12 Clement

No es posible escalar una imagen con CSS, pero se puede lograr un efecto similar de la siguiente manera.

Utilice este marcado:

<div id="background">
    <img src="img.jpg" class="stretch" alt="" />
</div>

con el siguiente CSS:

#background {
    width: 100%; 
    height: 100%; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    z-index: 0;
}

.stretch {
    width:100%;
    height:100%;
}

¡Y deberías haber terminado!

Para escalar la imagen para que tenga "sangrado completo" y mantener la relación de aspecto, puedes hacer esto:

.stretch { min-width:100%; min-height:100%; width:auto; height:auto; }

¡Funciona bastante bien! Sin embargo, si se recorta una dimensión, se recortará solo en un lado de la imagen, en lugar de recortarse uniformemente en ambos lados (y centrada). Lo probé en Firefox, Webkit e Internet Explorer 8.

Dec 23 '2008 13:12 SolidSmile

Utilice el atributo de tamaño de fondo en CSS3:

.class {
     background-image: url(bg.gif);
     background-size: 100%;
}

EDITAR: Modernizr admite la detección del tamaño de fondo . Puede utilizar una solución alternativa de JavaScript escrita para funcionar como la necesite y cargarla dinámicamente cuando no haya soporte. Esto mantendrá el código mantenible sin recurrir a hacks intrusivos de CSS para ciertos navegadores.

Personalmente uso un script para solucionarlo usando jQuery, es una adaptación de imgsizer . Como la mayoría de los diseños que uso ahora % de ancho para diseños fluidos en todos los dispositivos, existe una ligera adaptación a uno de los bucles (teniendo en cuenta tamaños que no siempre son 100%):

for (var i = 0; i < images.length; i++) {
    var image = images[i],
        width = String(image.currentStyle.width);

    if (width.indexOf('%') == -1) {
        continue;
    }

    image.origWidth = image.offsetWidth;
    image.origHeight = image.offsetHeight;

    imgCache.push(image);
    c.ieAlpha(image);
    image.style.width = width;
}

EDITAR: También te puede interesar jQuery CSS3 Finaliz[s]e .

Jul 29 '2010 10:07 Metalshark

Pruebe el artículo tamaño de fondo . Si utiliza todo lo siguiente, funcionará en la mayoría de los navegadores excepto Internet Explorer.

.foo {
    background-image: url(bg-image.png);
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    -webkit-background-size: 100% 100%; 
    background-size: 100% 100%;
} 

Nov 02 '2010 11:11 alekwisnia