¿Cómo usar un sprite CSS para una imagen de fondo repetitiva?

Question

Esto es algo con lo que he tenido problemas en el pasado y está en mi mente, así que hice una simple imagen de sprite de ejemplo para probar y con suerte obtener algunas respuestas.

Si ve mi código y demostración aquí http://dabblet.com/gist/2263037

Usted verá que tengo un div simple que utiliza una imagen de fondo

Por debajo de ese DIV Tengo el mismo div pero esta vez que intento use una imagen CSS Sprite en su lugar

Entonces mi pregunta, ¿es posible replicar el aspecto de la primera DIV usando esta imagen de sprite o se necesitan cambios en la imagen de sprite?

imagen Sprite

/* Notice wrapper with Single Image */ 
.notice-wrap { 
    margin-top: 10px; padding: 0 .7em; 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    border-radius: 4px; 
    border: 1px solid #CD0A0A; 
    background: #B81900 url(http://www.getklok.com/css/ui-lightness/images/ui-bg_diagonals-thick_18_b81900_40x40.png) 50% 50% repeat; 
} 

imagen Sprite

/* Notice wrapper with SPRITE Image */ 
.notice-wrap-sprite { 
    margin-top: 10px; padding: 0 .7em; 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    border-radius: 4px; 
    border: 1px solid #CD0A0A; 
    background: #fff url(http://f.cl.ly/items/2P1u2S1a132R0B3d2s08/test-sprite.png) repeat; 
    background-position: 0 -52px; 
} 

del HTML

<div class="notice-wrap"> 
     <p><strong>NOTICE:</strong> This is just a test notice, no reason to be alarmed</p> 
</div> 

<BR><BR><BR> 

<div class="notice-wrap-sprite"> 
     <p><strong>NOTICE:</strong> This is just a test notice, no reason to be alarmed</p> 
</div> 

Answer 1

Configurar el sprite

Puede utilizar un sprite de imagen para hacer lo que quiera. Solo pueden repetirse a lo largo de un eje, es decir, repeat-x, pero en su caso eso es todo lo que necesita. Además, tu imagen dentro del sprite debe tener todo el ancho, así es como el navegador sabe cómo colocarla.

El truco es que su fondo repetido debe extenderse a través del ANCHO COMPLETO de su imagen de sprite. Esto es crucial.Aquí está su imagen, modificado para cumplir con ese criterio:

Configuración del CSS

Ahora sólo nos queda hacer referencia a ella como de costumbre, y no tendrán ningún problema:

/* Notice wrapper with SPRITE Image */ 
.notice-wrap-sprite { 
    margin-top: 10px; padding: 0 .7em; 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    border-radius: 4px; 
    border: 1px solid #CD0A0A; 
    background: #fff url(http://f.cl.ly/items/2P1u2S1a132R0B3d2s08/test-sprite3.png) repeat-x; 
    background-position: 0 -52px; 
} 

Answer 2

yo creo que hay que poner el sprite en su propia fila en este caso con Sin. Esto debería funcionar ya que su imagen está limitada verticalmente a una altura establecida. Al menos eso es lo que parece en el ejemplo.

Además, la imagen debería tener el mismo ancho que el sprite. La razón por la cual la imagen de fondo necesita extender el ancho del sprite es porque estás repitiendo a través del eje x y si hay espacio en blanco u otra imagen a la izquierda de tu sprite, obtendrás algo similar a tu ejemplo.

En su ejemplo, las imágenes en su sprite pueden no encajar bien con esa imagen de fondo ya que son muy anchas. Por lo tanto, sería mejor si seleccionó otras imágenes que se ajusten al tamaño de esa imagen de fondo, probablemente más imágenes de fondo ya que generalmente puede usar imágenes más delgadas. Vea el ejemplo a continuación que uso en uno de mis sitios web.

Y como dice msigman, puede agregar repeat-x para asegurarse de que el fondo solo se repite a lo largo del eje x, pero si ha restringido su div a cierta altura y ha posicionado el sprite correctamente, la repetición-x puede no importar, pero es más seguro.