html - logo - sprites png

CSS Sprites y fondos repetidos.

Question

Me gustaría mantener todas mis pequeñas imágenes en un archivo sprite, por ejemplo:

Ahora, supongamos que quiero agregar una imagen de fondo delgada para repetir -x en más del 100% del ancho de un elemento:

¿Debe almacenarse esto como una entidad separada, o puedo almacenarlo de alguna manera en la imagen del sprite? No puedo calcular si es posible hacer una repetición en segundo plano sobre una sección de un sprite, creo que no, pero estoy bastante seguro de que lo he visto en alguna parte.

Answer 1

Tendrías que hacer el ancho completo de la imagen del sprite. De lo contrario, podría perder otras imágenes o espacio en blanco cuando se repita.

Recuerde que la repetición de imágenes de fondo realmente pequeñas (1-2px de ancho) puede tener un impacto terrible en el rendimiento; siempre es mejor usar imágenes un poco más grandes para eso, por lo que incluso si fuera demasiado ancho, en realidad puede ser una mejor representación de la página que 1px de ancho

EDITAR: (con respecto a su edición)

Si su elemento es de altura fija, puede colocarlo en el ancho de su sprite. Ancho del 100% del sprite con la altura máxima requerida del elemento. O si sabe que su ancho máximo es menor que el ancho del sprite, entonces hágalo un rectángulo con el ancho máximo y la altura de su elemento.

Si no conoce la altura máxima y desea colocarla en la parte superior para que el degradado se convierta en un color sólido, se puede hacer si coloca la imagen repetida en la parte inferior del sprite y la coloca con un background-position: 0px -300px valor superior negativo. background-position: 0px -300px donde 300px es la distancia desde la parte superior de tu sprite a la parte superior de la imagen de fondo en tu sprite.

Mira aquí cómo Google posicionó BG repetida en un sprite:

Answer 2

No estoy seguro de si esto ya está en CSS3, pero el motor Gecko (Firefox 4 ...) agrega image-rect como -moz-image-rect que le permite seleccionar una parte específica de una imagen para su uso. Con eso puedes seleccionar una parte de tu sprite como imagen de fondo y luego repetirla.

Sin embargo, definitivamente no está muy extendido ni es estándar.

Lo que me gusta hacer es hacer 3 tipos de sprites. Uno con íconos, donde no se usan repeticiones, uno para imágenes de repetición horizontal y otro para imágenes de repetición vertical.

De esa manera, puedes agregar varios fondos repetidos a un sprite, pero no tener la molestia de usarlos.