Buenas, estoy utilizando un sprite con todas las imagenes que voy a utilizar en la web.
El problema que tengo es que, cuando intento repetir una imagen de 1 px (es el fondo de un recuadro) no me la repite.
El codigo es el siguiente:
.box-bg
{
width:780px;
height:5px;
background-position:0px -194px;
background-repeat:repeat-y;
padding:5px 0;
}
La imagen la llamo desde aqui:
.box-bg
{
background:url("/images/sprite/sprite_border.png");
}
Gracias
#1 siendo de 1 px, solo la quieres repetir en el eje y?, lo de repeat-y es para que se repita tan solo en el eje Y, si quieres que se repita en toda la superficie, tienes que poner background-repeat:repeat;
Has mirado que la ruta del CSS está correcta, estas rutas son relativas al archivo CSS y no al HTML. Es decir, si tienes
archivo.html
css/styles.css
images/imagendefondo.png
desde el archivo styles.css, la ruta hacia imagendefondo.png sería:
background-url:img('../images/imagendefondo.png');
(atención a los 2 puntos que indican que está en la carpeta anterior).
Si, la ruta es correcta, sino cuando utilizo esa imagen para otros sitios no funcionaria.
Si de las imagenes que cojo del sprite no tengo que repetirlas no tengo ningun problema.
El problema viene cuando tengo una imagen, y tengo que darle estilo al background repitiendola tantas veces como quiera (es el caso de una imagen de 780 x 1 pixels).
Y si, solamente quiero repetirla en el eje y.
Lo primero es que pongas en una linea todo queda mucho mas limpio, efectivo y ahorras codigo.
background:#fff url("/images/sprite/sprite_border.png" ) left top repeat-y/repeat; o lo que te haga falta.
Y ahora añadele un color de fondo a ver si con eso se te soluciona (poniendo el #fff delante del background. Si ves que no te funciona quita la imagen y pon fondo negro #000, a ver si te coje el fondo, y explicanos que tipo de recuadro es, porque si es una caja de formulario las imagenes no suelen dar buenos resultados.
Bueno... voy a explicarme un poco mejor a ver si podeis ayudarme porque no encuentro la solucion.
Ahora mismo tengo la web y tengo diferentes apartados con divs.
En algunos de ellos le pongo un background formado por 3 imagenes.
La parte superior, la del medio y la inferior.
La imagen del medio es la que yo repito para hacer el la tabla tan grande como quiero.
El tema es que sin usar sprites me hace la repeticion de esa imagen bien, pero cuando le meto el sprite no.
Con codigo quiza se ve mas clar.
Un ejemplo de como funciona bien es:
.box-top
{
width:780px;
height:88px;
background-repeat:no-repeat;
background-position:0px -85px;
}
.box-bg
{
background:url("../images/box/bg-box-index.png") repeat-y scroll left top;
padding:1px 0;
}
.box-bottom
{
height:21px;
background-repeat:no-repeat;
background-position:0px -209px;
}
La clase box-bg es la que quiero repetir. Tal como esta ahora lo hace sin problemas, me repite esa imagen tan grande sea lo que yo cargue en un div interno.
El problema me viene cuando yo intento utilizar esa misma imagen desde un sprite y la intento repetir.
¿Ahora me e explicado mejor?
Ahí me surge una duda, si el Sprite tiene muchas imagenes, al hacer la repetición te mostrará imagenes no deseadas, no?
(me imagino que te refieres al sprite como un conjunto de imagenes en una sola imagen, que despues posicionas a tu gusto como fondo de un elemento html, no?)
De todas formas debería hacerte la repetición. Podemos ver tu web?
Exacto. El Sprite es un conjunto de muchas imagenes que necesito para la web.
Uso esto porque me di cuenta que la carga de imagenes ralentiza muchisimo la web (lo comprobé utilizando firebug).
Si hago el repeat, me repite todo el Sprite, es decir, todas las imagenes que forman la imagen.
¿Como puedo hacer para que me repita uncamente una sola imagen que yo escoja?
No la tengo subida al servidor. Puedo hacer una captura de pantalla si sirve....
Gracias
#8 me parece que no vas a poder, o almenos no conozco la forma. Creo que tienes que hacer una imagen expresamente para ese fondo, porque al repetir siempre te vá a repetir el Sprite entero.
(bueno, ya te digo que es lo que creo)
He encontado esta web donde demuestra que es posible.
http://www.phpied.com/background-repeat-and-css-sprites/
Ahora no pued probarlo porque estoy trabajando.
Cuando llegue a casa lo comprobaré.
Aunque es practicamente igual al codigo que tengo, no lo entiendo.
Pensaba como tu que no sería posible pero aqui se ve que lo es... no se.. llevo un lio...
En la web que has pasado, hay un Sprite por cada fondo de div, no es un sprite con multitud de imagenes. Tienen el sprite rojo, el azul y el verde, y lo repiten verticalmente, ya que el ancho del fondo es igual al ancho del div.
Lo hacen también con un solo sprite:
http://www.phpied.com/wp-content/uploads/2008/04/sprite8.png
Sin ver la web en si, me parece el típico problema chorra de que no le estás dando la posición correcta, la ruta no es la que toca, el div no está pillando el height, o algo por el estilo
