Themes y Diseño
está sin resolverHola,
Estoy intentando subir unas imagenes con sprites, pero no logro mapear la imagen. En lugar de mostrar el trozo de imagen que le indico me muestra la imagen entera.
Dejo el código por si alguien puede ayudarme:
Parece que no reconoce la linea background:url del css, puesto que todo lo demás sale bien.
La última línea de código también incorpora esto:
width="1" height="1"
pero por algún motivo se borra cuando lo intento añadir al mensaje.
usas el selector:
img.greenarrow
o lo veo aquí
prueba usando:
.greenarrow img
suponiendo que tu imagen esta dentro de este contenedor
gracias Pedro, pero no ha funcionado. Me desaparecen las imágenes.
Te lo explico con un ejemplo.
Suponiendo que la imagen contenga 3 sprites en vertical de 45 pixeles de alto por 112 de ancho, la imagen resultante será de 135 (3x45) de alto por 112 de ancho.
Es decir,
width: 112px;
height: 45px;
Para seleccionar la primera imagen (de arriba a abajo)
background: url("images/imagen.gif") no-repeat scroll 0px 0px transparent;
Para la segunda:
background: url("images/imagen.gif") no-repeat scroll 0px -45px transparent;
para la tercera:
background: url("images/imagen.gif") no-repeat scroll 0px -90px transparent;
Lo de transparent por si la imagen es transparente. Adaptalo a las medidas de tu imagen.
Por supuesto, la imagen debe estar bien hecha.
Un saludo
Si si, esto es lo que estoy haciendo desde el principio, sinembargo algo se me escapa, puesto que continúa apareciendo la imagen entera aunque defina solo un fragmento. He ensayado diversas combinaciones pero nada.
He vuelto a poner el código añadiendo el norepeat y demás por si acaso, pero el resultado continúa mostrando la imagen entera a la medida del ancho y alto que le doy:
img.greenarrow{
width:45px;
height:34px;
background:url(imgsprites.png)no-repeat scroll 0 -363px transparent;
position:absolute;margin-left:-47px;margin-top:-2px;opacity:.8;
}
y
< img class="greenarrow" src="/wp-content/themes/publibiz-legacy/images/imgsprites.png" width="1" height="1" / >
estoy seguro que me estoy equivocando en alguna tontería, pero no lo veo.
mi impresión es que sencillamente no lee esta linea:
background:url("/images/imgsprites.png")no-repeat scroll 0 363px transparent;
puesto que obtengo exactamente el mismo resultado si no la añado.
¿lo tienes on line?, para checarlo.
el sprite tiene que hacerlo sobre una capa.
.greenarrow{
width:45px;
height:34px;
background:url(imgsprites.png);
position:absolute;margin-left:-47px;margin-top:-2px;opacity:.8;
}
<div class="greenarrow"> </div>
Podéis verlo en
http://test.ejerciciodeingles.com/cursos-de-ingles-para-empresas-y-colectivos-lan01/
identificaréis inmediatamente las dos imágenes afectadas. El resto, de momento, no están subidas con sprites.
Pero vamos a ver. ¿Qué quieres mostrar?
¿Por qué pones dos veces la imagen? Una en background y otra dentro de <div class="greenarrow"> </div>
La imagen es enorme, ¿Cómo calculas la posición de los sprites?. Prueba con una imagen más pequeña.
El código es el que ha puesto Pedro Raul con ligeros retoques:
.greenarrow{
width:45px;
height:34px;
background:url(images/imgsprites.png) no-repeat scroll 0px -363px transparent;
position:absolute;margin-left:-47px;margin-top:-2px;opacity:.8;
}Suponiendo que en esa posición 363 pixeles esté lo que quieres mostrar.
Viendo la imagen corresponde a la flecha azul pero sale cortada. Esa flecha mide 62 x 62. No sé como has hecho los cálculos.
Un saludo
revisando tu hoja de estilo, encontré el error. la url de la img no esta bien definida la cambie por esto y listo. muestra un cartel en fondo negro
div.landcl1 {
background: url("images/result.png") repeat scroll 0 -526px transparent;
height: 210px;
margin-top: 10px;
width: 1022px;
}
Debes Identificarte para publicar.