Repetición de una sección de una imagen en CSS

Question

Quiero tomar una sección de una imagen, por ejemplo, la mitad de un picure, y repetir solo esa sección en el fondo de un div. ¿Esto es remotamente posible? Supongo que podría hacer esto en javascript, pero sería desordenado.

En teoría, la respuesta a mi pregunta debería ser capaz de tomar un solo píxel de una imagen y repetirlo en una línea, o como un fondo sólido.

¿Alguien tiene alguna idea de cómo podría hacer esto en CSS?

Answer 1

Es posible que pueda lograr este efecto utilizando la propiedad CSS3 border-image.

Desafortunadamente, no conozco una manera de hacer este tipo de cosas en CSS2. Además, no creo que puedas hacer esto a través de sprites de CSS, porque los sprites no estiran partes de tu imagen, solo te permiten mostrar ciertas partes de la imagen.

Steve

Answer 2

Si desea una solución multi-navegador, entonces Estás de suerte, especialmente si desea una solución CSS.

La única manera de hacerlo con JavaScript sería a través del elemento canvas, pero IE no lo admite.

Answer 3

CSS no puede hacer esto. Sin embargo, puedes hacerlo desde el servidor o usando gráficos SVG o Flash. Tenga en cuenta que hacerlo con un complemento no sería técnicamente una 'imagen de fondo', necesitaría colocar su contenido encima de él.

Answer 4

Al contrario de lo que algunos han indicado aquí, dependiendo de la imagen, PUEDE hacer esto con CSS/Sprites, pero ese no siempre será el caso. Se trata de la imagen que desea repetir, es alto/ancho en relación con el sprite en el que existe, la dirección que desea repetir , y el tamaño del contenedor que desea que se repita en.

alt text http://www.sampsonresume.com/labs/sprite.gif

Este sprites se podría repetir en el 100px dejado para su uso en una barra lateral, mientras que las otras partes podrían servir como botones y roll- encima estados en una navegación. con un pequeño cambio, puede hacer que la porción repetible sea horizontal.