imagen de fondo css repetida un número de veces establecido

Question

¿hay alguna manera de establecer el número de veces que una imagen de fondo se repite con css?

Answer 1

no.

puede establecer un ancho absoluto para un cuadro pero no hay opción de css para repetir la imagen n veces.

Answer 2

Un truco feo podría Insertar varias veces -statically- la misma imagen (utilizando multiple backgrounds):

P. ej Para repetir horizontalmente una imagen (80x80) tres veces:

background-image: url('bg_texture.png'), 
        url('bg_texture.png'), 
        url('bg_texture.png'); 
background-repeat: no-repeat, 
        no-repeat, 
        no-repeat; 
background-position: 0 top, 
        80px top, 
        160px top; 

cuidado: no trabajar en IE bajo 9 versión (source).

Answer 3

Puede combinar un poco de jQuery con CSS para lograr lo que desea.

Digamos que quiere mostrar la imagen foo.png 3 veces horizontalmente y 2 veces verticalmente.

CSS:

body { 
    background: url('foo.png'); 
} 

jQuery:

$(document).ready(function() { 
    $('body').css('background-size', $(window).width()/3 + 'px ' + $(window).height()/2 + 'px'); 
}); 

Además, usted podría pegar el mismo código dentro .resize (ventana) $() para obtener una respuesta dinámica.

Answer 4

No estoy seguro de lo que originalmente motivó esta pregunta, pero lo encontré buscando la forma de asegurarme de que solo aparece un número integral de copias de una imagen de fondo (es decir, no recortar el miembro final de un conjunto repetido de imágenes de fondo.) Eso se puede lograr a través de la propiedad background-repeat: space.