Foros del Web » Creando para Internet » Diseño web »

Repeat Background - Seccion de una imagen

Estas en el tema de Repeat Background - Seccion de una imagen en el foro de Diseño web en Foros del Web. Hola muy buenas a todos, soy nuevo en forosdelweb y tengo una duda que no consigo solucionar desde hace tiempo, creo que podría ayudar a ...
  #1 (permalink)  
Antiguo 15/01/2012, 06:56
 
Fecha de Ingreso: enero-2012
Ubicación: Santander
Mensajes: 1
Antigüedad: 12 años, 3 meses
Puntos: 0
Exclamación Repeat Background - Seccion de una imagen

Hola muy buenas a todos, soy nuevo en forosdelweb y tengo una duda que no consigo solucionar desde hace tiempo, creo que podría ayudar a amenizar la carga de las imágenes de cualquier web. Les comento:
Mi idea es colocar todas las imágenes que necesite en en una misma, tipo

youtube ( http://s.ytimg.com/yt/imgbin/www-refresh-vflcB5eQ_.png )

o

twitter ( http://a0.twimg.com/a/1326412195/t1/img/twitter_web_sprite_icons.png )

el problema llega cuando quiero colocar un background-repeat. Busco hacer, de cualquier manera ( css, script o lo que sea ), que se seleccione una parte de esta imagen y que sea esta y solo esta parte la que se repita todo el rato, me explico, si colocásemos un repeat-x común, a una parte de la imagen de twitter, se repetiría toda la imagen horizontalmente todo el tiempo, cuando lo que busco es que solo se repita una parte de 1x30 px solamente ( por ejemplo ), que se encuentre en el medio de la imagen o en cualquier lado, evitando que se repita todo el ancho de la imagen.

La solucion que encontre en un principio, era por ejemplo, teniendo una imagen de 10x30 px, y queriendo que se repita el fondo que se encuentra en 5x1 px fue usando background-size, quedando el código asi:

background: url(../ruta/imagen.png) repeat-x 5000px -0px;
background-size:10000px 30px;

pero pronto lo descarte por la poca compatibilidad de ese comando css.


La solución que tengo aora es colocar las imágenes-fondo verticalmente en una imagen de 1x300, ya que a la hora de hacer repeat-x, no interfiere ningún otro trozo de la imagen, pero esto no me soluciona nada ya que no puedo juntar todas mis imágenes en una misma como desearía.


Un saludo y gracias de antemano ;)
  #2 (permalink)  
Antiguo 15/01/2012, 10:36
Avatar de maycolalvarez
Colaborador
 
Fecha de Ingreso: julio-2008
Ubicación: Caracas
Mensajes: 12.120
Antigüedad: 15 años, 9 meses
Puntos: 1532
Respuesta: Repeat Background - Seccion de una imagen

a esa técnica se le conoce como sprites, y funciona perfectamente para evitar el exceso de request, optimizando la carga para iconos y pequeñas imágenes.

si desea utilizarse para el relleno de fondos, se deben colocar estratégicamente para rellenar en sentido horizontal u vertical (no Ambos), cuyo sprite sólo tenga una fila o columna de imágenes, no como la de youtube que tiene una matriz en sí.

por otro lado CSS no recorta imágenes, el recorte se hace aplicando capas con dimensiones especificas
__________________
¡Por favor!: usa el highlight para mostrar código
El que busca, encuentra...

Etiquetas: imagenes, repeat, fondo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 21:26.