Estirar y escalar fondo CSS

¿Hay alguna manera de obtener un fondo en CSS para estirar o escalar para llenar su contenedor?

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

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

cover significa estirar la imagen vertical u horizontalmente para que nunca 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 inferiores 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')";

Use la propiedad CSS 3background-size :

#my_container {
    background-size: 100% auto; /* width and height, can be %, px or whatever. */
}

Está disponible para navegadores modernos, desde 2012.

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

Use 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, puede hacer esto en su lugar:

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

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

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 de soporte de tamaño de fondo . Puede usar una solución de JavaScript escrita para trabajar, sin embargo, la necesita y cargarla dinámicamente cuando no hay soporte. Esto mantendrá el código mantenible sin recurrir a intrusivos hacks CSS para ciertos navegadores.

Personalmente utilizo un script para tratarlo usando jQuery, es una adaptación de imgsizer . Como la mayoría de los diseños que uso ahora usan ancho% 's para diseños de fluidos a través de dispositivos, hay una ligera adaptación a uno de los bucles (teniendo en cuenta los tamaños que no siempre son del 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 .

Prueba el tamaño de fondo del artículo . Si usa 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%;
} 

No actualmente. Estará disponible en CSS 3 , pero llevará algún tiempo hasta que se implemente en la mayoría de los navegadores.

.style1 {
        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;
}

Trabaja en:

• Safari 3+
• Chrome lo que sea +
• IE 9+
• Opera 10+ (Opera 9.5 admite el tamaño de fondo pero no las palabras clave)
• Firefox 3.6+ (Firefox 4 es compatible con la versión prefijada de no proveedor)

Además, puede probar esto para una solución ie

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

Crédito a este artículo por Chris Coyier http://css-tricks.com/perfect-full-page-background-image/

En una palabra: no. La única forma de estirar una imagen es con el<img> etiqueta. Tendrás que ser creativo.

Esto solía ser cierto en 2008, cuando se escribió la respuesta. Hoy en día, los navegadores modernos admiten lo background-sizeque resuelve este problema. Tenga en cuenta que IE8 no lo admite.

Definir "estirar y escalar" ...

Si tiene un formato de mapa de bits, generalmente no es bueno (gráficamente hablando) estirarlo y tirar de él. Puede usar patrones repetibles para dar la ilusión del mismo efecto. Por ejemplo, si tiene un degradado que se aclara hacia la parte inferior de la página, usaría un gráfico de un solo píxel de ancho y la misma altura que su contenedor (o preferiblemente más grande para tener en cuenta la escala) y luego lo colocará en mosaico página. Del mismo modo, si el gradiente corriera por la página, tendría un píxel de alto y más ancho que su contenedor y se repetiría por la página.

Normalmente, para dar la ilusión de que se estira para llenar el contenedor cuando el contenedor crece o se contrae, hace que la imagen sea más grande que el contenedor. Cualquier superposición no se mostraría fuera de los límites del contenedor.

Si desea un efecto que se base en algo así como una caja con bordes curvos, entonces pegaría el lado izquierdo de su caja al lado izquierdo de su contenedor con suficiente superposición que (dentro de lo razonable) no importa cuán grande sea el contenedor, nunca se queda sin fondo y luego coloca una imagen del lado derecho de la caja con bordes curvos y la coloca a la derecha del contenedor. Por lo tanto, a medida que el contenedor se encoge o crece, el efecto de caja curva parece encogerse o crecer con él, de hecho no lo hace, pero da la ilusión de que es lo que está sucediendo.

En cuanto a hacer que la imagen se reduzca y crezca con el contenedor, necesitará usar algunos trucos de capas para que la imagen parezca funcionar como fondo y algunos JavaScript para cambiar su tamaño con el contenedor. No hay una forma actual de hacer esto con CSS ...

Si está utilizando gráficos vectoriales, me temo que está fuera de mi ámbito de especialización.

Esto es lo que he hecho de eso. En la clase de estiramiento, simplemente cambié la altura a auto. De esta manera, la imagen de fondo siempre tiene el mismo tamaño que el ancho de la pantalla y la altura siempre tendrá el tamaño correcto.

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

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

Agrega una background-attachmentlínea:

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

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

Me gustaría señalar que esto es equivalente a hacer:

html { width: 100%; height: 100%; }
body { width: 100%; height: 100%; /* Add background image or gradient to stretch here. */}

Otra gran solución para esto es el Backstretch de Srobbin que se puede aplicar al cuerpo o a cualquier elemento de la página: http://srobbin.com/jquery-plugins/backstretch/

Prueba esto

http://jsfiddle.net/5LZ55/4/

body
{ 
    background: url(http://p1.pichost.me/i/40/1639647.jpg) no-repeat fixed; 
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

Un consejo adicional para el truco de SolidSmile es escalar (el cambio de tamaño proporcional) estableciendo un ancho y usando auto para la altura.

Ex:

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

Use la border-image : yourimagepropiedad para configurar su imagen y escalarla a todo el borde de su pantalla o ventana.