Problema en la visualización de sprite en CSS para background

  • Autor Autor Jdel
  • Fecha de inicio Fecha de inicio
J

Jdel

Curioso
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Hola a todos:

Tengo un código del sprite agregado al css que es el siguiente:
.sprite {
background-image: url(spritesheet.png);
background-repeat: no-repeat;
display: block;
}

.sprite-100 {
width: 230px;
height: 35px;
background-position: -5px -5px;
}

.sprite-101 {
width: 230px;
height: 35px;
background-position: -245px -5px;
}

.sprite-107 {
width: 230px;
height: 35px;
background-position: -485px -5px;
}

.sprite-108 {
width: 230px;
height: 35px;
background-position: -725px -5px;
}

.sprite-band_arg20 {
width: 20px;
height: 13px;
background-position: -965px -5px;
}

.sprite-band_prov20 {
width: 20px;
height: 13px;
background-position: -995px -5px;
}

.sprite-band_slt20 {
width: 20px;
height: 13px;
background-position: -1025px -5px;
}

.sprite-downArrow {
width: 9px;
height: 5px;
background-position: -1055px -5px;
}

.sprite-fondo_agenda {
width: 1400px;
height: 23px;
background-position: -5px -50px;
}

.sprite-logo_muni {
width: 184px;
height: 70px;
background-position: -5px -83px;
}

.sprite-logo_seuc {
width: 155px;
height: 85px;
background-position: -199px -83px;
}

.sprite-logomobile {
width: 170px;
height: 110px;
background-position: -364px -83px;
}

.sprite-phone {
width: 16px;
height: 16px;
background-position: -1074px -5px;
}

.sprite-saltonline {
width: 209px;
height: 67px;
background-position: -544px -83px;
}

.sprite-sat {
width: 178px;
height: 63px;
background-position: -763px -83px;
}

.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;
}

Luego en el mismo css tengo el código de diseño de la página, en donde en header, aside y sección principal quiero que el background sea el transparent de 20x20 (al sear 20x20 debe ser repeat, para cubrir dicho fondo).
Y en "article-agenda" usar el fondo correspondiente a agenda.
Copio a continuación este trozo de código:
header,aside,{
background: transparent url(../img/spritesheet.png) -1132px -5px;
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/spritesheet.png) -1132px -5px;
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%
}

article#agenda {
background: url(../img/fondo_agenda.gif) -5px -50px;
border-radius: .5em;
-moz-border-radius: .5em;
-ms-border-radius: .5em;
-o-border-radius: .5em;
-webkit-border-radius: .5em;
min-height: 500px;
margin: 0 auto -15px; /* the bottom margin is the negative value of the footer's height */
padding: 2.75em;
text-align: left;
font-family: "talking_to_the_moonregular", Helvetica, Arial, sans-serif;
font-size: 155%;
color: red;

}
No se que error estoy cometiendo, pues no sale la imágen que corresponde, sale la imagen completa del sprite total.

Muchas gracias y saludos cordiales

Jdel
 
Si pudieras poner tu código en un editor online como JSFiddle y con la imagen para poder verla, sería mejor.
 
Hola [MENTION=133835]Jdel[/MENTION] gracias por tu aporte.

Podrías editar el post y colocarlo dentro de las etiqueta CODE para que tenga mejor visualización?, ademas de subir unas capturas del resultado de dicho post.

No olvides pasar por el área de presentaciones donde de seguro te darán una calidad bienvenida
 
Aqui te envío carpeta compartida con los archivos.
1) datos.html es como se debería visualizar. (Está el css hecho sin el sprite)
2) datos_utiles.html es donde tengo el inconveniente usando el sprite en el css y el backgroud "transparent" que deseo como fondo.

https://app.box.com/s/3g1f6bfk8v1jcfdlk1s6h422kunux88i

Muchas gracias por la pronta respuesta
AMSQ
 
Hola:
Estás haciendo esto: section#principal, aside{background: url("../img/spritesheet.png") repeat scroll -1132px -5px;} No se puede usar una parte de una imagen(sprite) como fondo y usar repeat.

Tienes una imagen "transparent.png", deberías usarlo en vez del sprite o poner el fondo con rgba() para que uses la transparencia.

Espero te sirva.
 
Muy agradecido por tu respuesta, usaré el transparent aparte como lo venia haciendo anteriormente y funcionaba.
Hasta la próxima.
Slds
Jdel
 
Atrás
Arriba