que - imagen de fondo css pantalla completa

Imagen de fondo solo estirar el eje y, repetir repetición-x

Question

Tengo una imagen configurada como imagen de fondo de un div. El tamaño del DIV está cambiando y en su interior está la imagen que es un degradado.

CSS:

#scroller_shadow{
background-image:url(../img/ui/shadow.png);
background-repeat:repeat-x;
background-position:top;
}

Necesito una solución de navegador cruzado para hacer que la imagen se ajuste a la altura de la división solo en el eje y, manteniendo la repetición-x. El DIV se está redimensionando dinámicamente a través de JQuery.

Su podría ser una opción de navegador cruzado utilizando JQuery. No me importa usar scripts para lograr eso con el fin de obtener compatibilidad con varios navegadores (IE7 +). No quiero estirar la imagen porque pierde la intensidad cuando estiras la imagen en el eje x, lo que hace que una imagen png semitransparente sea casi transparente.

Gracias.

Answer 1

Yo tuve este problema también. Es fácil en la mayoría de los navegadores, pero IE8 y por debajo es complicado.

Solución para los navegadores modernos (cualquier cosa que no sea IE8 o inferior):

#scroller_shadow {
background: url(../img/ui/shadow.png) center repeat-x;
background-size: auto 100%;
}

Hay complementos de jQuery que pueden imitar el tamaño de fondo para IE8 y anteriores, específicamente backgroundSize.js pero no funciona si desea que se repita.

De todos modos así comienza mi terrible pirateo:

<div id="scroller_shadow">
<div id="scroller_shadow_tile">
<img src="./img/ui/shadow.png" alt="" >
<img src="./img/ui/shadow.png" alt="" >
<img src="./img/ui/shadow.png" alt="" >
...
<img src="./img/ui/shadow.png" alt="" >
</div>
</div>

Asegúrese de incluir suficientes <img> para cubrir el área necesaria.

CSS:

#scroller_shadow {
width: 500px; /* whatever your width is */
height: 100px; /* whatever your height is */
overflow: hidden;
}
#scroller_shadow_tile {
/* Something sufficiently large, you only to make it unreasonably wide if the width of the parent is dynamic. */
width: 9999px;
height: 100%;
}
#scroller_shadow_tile img {
height: 100%;
float: left;
width: auto;
}

De todos modos, la idea es crear el efecto de estiramiento a partir de las imágenes.

JSFiddle .