Foros del Web » Creando para Internet » CSS »

Sprites Avanzados

Estas en el tema de Sprites Avanzados en el foro de CSS en Foros del Web. Hola gnte, resulta que tengo un div al que lo llamo header. Este mismo deberia de tener un background con repeat-x de una imagen spriteada. ...
  #1 (permalink)  
Antiguo 24/01/2011, 10:49
 
Fecha de Ingreso: diciembre-2010
Mensajes: 8
Antigüedad: 7 años
Puntos: 0
Pregunta Sprites Avanzados

Hola gnte, resulta que tengo un div al que lo llamo header.
Este mismo deberia de tener un background con repeat-x de una imagen spriteada.

(Esta es la imagen spriteada)



El background del div seria la parte en azul de la imagen anterior (esa seria la textura que iria cn el repeat-x... repito la imagen azul)

resulta que intente de la siguiente manera:

Código HTML:
.head{
	height:54px;
	width:100%;
	background:url('images/sprites/index.png');
	background-repeat: repeat-x;
	background-position: -2px 0px;
}
Pero no sucede lo esperado... alguien sabe como hacerlo?

NOTA: Las coordenadas de la textura azul en el sprite son: -2px 0px

Gracias.
  #2 (permalink)  
Antiguo 24/01/2011, 11:05
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Respuesta: Sprites Avanzados

cuando un background se repite en X o en Y tenes que armar un scprite por separado, ya que si utilizas el sprite comun lo que repite es toda la imagen, no las coordenadas, me explico?
  #3 (permalink)  
Antiguo 24/01/2011, 11:10
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Sprites Avanzados

Otros llegamos a la misma conclusión que tú hace tiempo. CSS2.1 es algo grande pero aún se nos queda muy pequeño.
Si quieres usarlo con un repeat-x debes colocarlo ocupando la totalidad del ancho de tu imagen. Debes decidir si compensa o no incluirlo en el archivo de sprites. Yo uso a menudo tres archivos de sprites. Uno para imágenes en vertical, otro para imágenes en horizontal y otro para imágenes que tienen un ancho y alto determinados. En este último caso pueden ir todos los sprites uno al lado del otro. En los dos casos anteriores deben ir todos bien en horizontal uno al lado del otro o bien en vertical uno sobre otro.
Parece que esto cambiará en breve, pero de momento yo sigo trabajando así.
Por cierto, todo este conocimiento no viene incluido en mis genes, tampoco es que haya estudiado tanto, ha sido a causa del viejo método de ensayo y error.
  #4 (permalink)  
Antiguo 24/01/2011, 11:12
 
Fecha de Ingreso: diciembre-2010
Mensajes: 8
Antigüedad: 7 años
Puntos: 0
Respuesta: Sprites Avanzados

gracias muchachos me entendi clarisimo, voy a probar y paso a comentar comoi me fue (voy a hacer lo de sanxuan) gracias a los 2 ;)

Etiquetas: repeat, sprites
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 19:15.