Sprite en CSS

[jdelrosario]

Hola a todos:
He realizado un sprite con varias img, el cual he cargado en el css, a continuación una muestra:
.sprite {
background-image: url(spritesheet.png);
background-repeat: no-repeat;
display: block;
}
.sprite-tilde {
width: 22px;
height: 22px;
background-position: -1100px -5px;
}

.sprite-transparent {
width: 20px;
height: 20px;
background-position: -1132px -5px;
}

.sprite-upArrow {
width: 9px;
height: 5px;
background-position: -1162px -5px;
}

Seguidamente en el mismo css deseo utilizar el sprite-transparent como fondo en lo siguiente:
header,aside,{
background: transparent url(../img/spritesheet.png) -1132px -5px;
border-radius: .5em;
margin: .5em auto;
max-width: 960px;
padding: .25em;
text-align: center;
}
Estoy cometiendo un error desde ayer pero no logro resolverlo.
Pueden ayudarme por favor?
Mil gracias y saludos
JdelRosario

[Zeromm]

y el error es...? ¿que problema tienes?

[jdelrosario]

El error no se donde está, el tema es que no me aparece la img en la página.

El sprite transparent, es un 20x20 que lo utilizo como fondo semitransprente, si lo uso sin el sprite funciona, asi es el css:
section#principal, aside{background:transparent url(../img/transparent.png);border-radius:.5em;-moz-border-radius:.5em;-ms-border-radius:.5em;-o-border-radius:.5em;-webkit-border-radius:.5em;display:inline-block;margin:.55em auto;max-width:960px;min-height:300px;padding:.25em;text-align:center;vertical-align:top;width:70%}

pero cuando hago el sprite y deseo extraer ese transparent 20x20 para usarlo de fondo, me aparece el sprite completo donde están todas las img.

Gracias por atenderme tan prontamente.

JdelRosario

[Zeromm]

¿tienes algún link donde ver el problema?

[jdelrosario]

Te he enviado una carpeta compartida con los archivos a tu gmail.

Muchas gracias.

[AngelKrak]

alguna web donde lo tengas subido para verlo mejor? o cap?

[jdelrosario]

Envío enlace compartido de carpeta, luego veo de poder subirlo a algun servidor.

https://drive.google.com/folderview?id=0B8PzOk-sbSqEfmNUNThTM2prWklEaDVzMEVlWEVZdHVnLTljZzExazE0a FNfbkRtcXpCN1E&usp=sharing

Muchas gracias
JdelRosario

[AngelKrak]

no se puede ver, subela a mi web: http://angelkrak.blockpost.skn1.com/index.php

[jdelrosario]

Subido en formato zip y rar

Muchas gracias nuevamente
Jdel

[AngelKrak]

no entiendo muy buen tu problema, especificalo mejor que es lo que quieres exactamente?

a mi me sale asi >_<

[jdelrosario]

Exacto! eso me sale a mi. y No tiene que salir así.
Pues sale todo el sprite como fondo en vez de el transparent.png solamente.
Fijarse en el css que ahora te he subido un nuevo archivo, contiene un html (datos.html) con un css style.css.
Así debería verse.
O sea: si uso el css con el enlace a la img transprent.png solamente funciona.
Pero si quiero tomar esa misma imagen del sprite es allí donde no puedo darle a la tecla.

Mil gracias
Jdel

[MMan]

me parece que tienes CONFUSO el concepto del sprite

si te fijas BIEN en tu CODigo

Código CSS:

.sprite-tilde {
width: 22px;
height: 22px;
background-position: -1100px -5px;
}
 
.sprite-transparent {
width: 20px;
height: 20px;
background-position: -1132px -5px;
}
 
.sprite-upArrow {
width: 9px;
height: 5px;
background-position: -1162px -5px;
}
 

que tienen en comun ?? WIDth, HEIght y el background en todos ellos

con el width y el height defines el tamaño de la imagen que vas a mostrar del background..

como si tuvieses un papel grande.. y le haces un hueco por donde mirar/espiar

y con el background url(...) X Y

mueves la imagen para que se ADAPTE al hueco y muestre la imagen que deseas

[jdelrosario]

El sprite esta realizado online con el css sprite generator, de hecho lo he usado en otras paginas y funciona perfecto.
Lo que aquí no logro es hacer andar el background de sector de la página llámese "aside" "article" "principal" etc.

Creo entenderte, y trato de realizar lo siguiente:
Tengo un sprite de varias img, una de ellas "transparent" de 20x20, la deseo utilizar como background de un espacio determinado en el mismo css; le doy la coordenadas de donde lo debe extraer "x e y" y no me lo muestra, me muestra todo el sprite completo.
Gracias por tu participación en búsqueda de mi error.
Jdel

[MMan]

.... ok
quieres poner la parte transparente de 20 x 20 en el "aside" "article" "principal" etc.

de que tamaño es el "aside" "article" "principal" etc.??

es de 20x20 ?
mas grande ?

si es mas grande.. tendrias que ESCALAR el background.. para que ocupe es espacio del ... "aside" "article" "principal" etc.

[JSFIDDLE="http://fiddle.jshell.net/oyrqctg6/"][/JSFIDDLE]

[jdelrosario]

Si pongo el transparent 20x20 como background sin el sprite, me cubre automáticamente todo el fondo que disponga el "aside" "article" etc.
Lo que no puedo lograr es que me tome ese 20x20 desde el sprite en si mismo.
Por ej. en este style:
header,aside,{
background: transparent url(../img/transprent.png);
border-radius: .5em;
margin: .5em auto;
max-width: 960px;
padding: .25em;
text-align: center;
}

section#contenedor {
margin: .5em auto;
max-width: 960px;
padding: 0;
text-align: center;
}

section#principal, aside {
background: transparent url(../img/transparent.png);
border-radius: .5em;
-moz-border-radius: .5em;
-ms-border-radius: .5em;
-o-border-radius: .5em;
-webkit-border-radius: .5em;
display: inline-block;
margin: .55em auto;
max-width: 960px;
min-height: 300px;
padding: .25em;
text-align: center;
vertical-align: top;
width: 70%
}

Aquí me funciona bien

Nuevamente gracias y saludos
Jdel.

[MMan]

para que hagas una prueba...

a ese codigo que dices que te funciona bien.. agregale NO-REPEAT al background...

el valor por defecto es que SI repita (repeat )

Código CSS:

background: transparent url(../img/transparent.png) [B]no-repeat[/B];
 

y luego de que veas para que sirve... (o como funciona)

agregale tambien el no-repeat al sprite....

veras que los 2 tienen el mismo cuadrito en la parte superior izquierda
--------------------------

y por ultimo ... quitale el no-repeat....

que sucede ? (cuando no tiene ese valor, por defecto repite la imagen)

en el caso del que "SI funciona" es por que solamente tienes 1 imagen (../img/transparent.png)

y al momento de repetir.. se ve todo parejo

sin embargo con la imagen del sprite no es igual... por que tienes imagenes mezcladas, y se REPITEN esas... empezando por el cuadrito de 20x20 y repitiendose el resto (de la imagen.. no solo del cuadrito)

----------
por lo tanto... si quieres usar un sprite (parte de una imagen) para que llene un fondo, ya que NO PUEDES usar el repeat (por lo mencionado anteriormente ) la unica forma es ESCALAR (como indique en el post anterior -ver ejemplo en fiddle ) para llenar es espacio del contenedor

[jdelrosario]

Perfecto, todo eso lo he entendido, y ya lo había probado, con repeat y sin reapeat

Por supuesto que si pongo una imagen a escala seguramente me lo cubrirá, lo que yo pretendo es que así como lo hago mediante el css con una img de transparent 20x20, tambien lo pueda realizar desde un sprite. Ese es el quit de la question

Slds y gracias por tu paciencia
Jdel

[MMan]

...NO creo que se pueda SOLAMENTE con css

tal vez javascript....