Problema na visualização de sprite em CSS para background

  • Autor Autor Jdel
  • Data de início Data de início
Tradução em andamento: em alguns minutos este tópico estará em português. Por enquanto, o conteúdo está no original em espanhol. Ver original
J

Jdel

Curioso
Usuário com poucas negociações! Use sempre o saldo do 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
 
Foi útil? Participe da conversa

Com sua conta grátis você pode responder, mandar mensagem privada ao autor e comprar com Saldo retido: o pagamento é liberado quando você recebe o combinado.

Leva 30 segundos · você volta a este tópico ao terminar
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
 
Voltar
Topo