css - imagen - background repeat xy

Repita la imagen de fondo CSS un número determinado de veces.

Question

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

Answer 1

No estoy seguro de lo que motivó originalmente esta pregunta, pero lo encontré buscando una 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). Esto se puede lograr a través de la propiedad background-repeat: space .

Answer 2

Puedes combinar un poco de jQuery con CSS para lograr lo que quieres.

Digamos que quieres 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, puede pegar el mismo código dentro de $ (window) .resize () para obtener una respuesta dinámica.

Answer 3

Si bien no se repite estrictamente el número de veces de una imagen, como @gcbenison dijo, puede usar la propiedad de background-repeat: space o, de manera similar, la background-position: round y combinar cualquiera de estos con background-size para asegurar un conjunto se muestra el número de repeticiones de una imagen de fondo, y luego tal vez ajuste el tamaño de la envoltura para acomodar.

Tanto el space como la repeat repetirán una imagen de fondo infinitamente siempre que se pueda mostrar la imagen completa, aunque para cualquier space restante se agregará un espacio entre las imágenes, mientras que la round las imágenes. En pocas palabras, si la imagen de fondo se ajusta verticalmente a 3.342 veces, tanto el space como la round mostrarán la imagen 3 veces, y el space agregará un espacio entre cada imagen repetida y round las imágenes hacia arriba (o hacia abajo, si es necesario) para llenar el espacio. .

Por lo tanto, si desea repetir una imagen 5 veces, con cada imagen de 20 px de ancho y 5 px de espacio intermedio, simplemente podría hacer esto:

.star-rating {
    width: 120px;
    background-image: url(''example.jpg'');
    background-repeat: space;
    background-size: 20px auto;
    }

https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat

La otra opción (si no puede establecer el ancho) es usar la solución de @franzlorenzon y simplemente declarar el número x de fondo con la propiedad CSS de fondo múltiple.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds

Además, puede guardar la escritura de varias líneas utilizando SASS creando un bucle @for así:

$image_count: 5;
$image_url: ''url(star.svg)'';
$image_position: ''0'';

@for $i from 1 through ($image_count - 1) {
    $image_url: #{ $image_url+'', ''+$image_url };
    $image_position: #{ $image_position+'', ''+($i * (100% / $image_count)) };
}

.star-rating {
    background-image: $image_url;
    background-position: $image_position;
    background-size: 20px;
    background-repeat: no-repeat;
}

Esto generará las imágenes de fondo, todas espaciadas uniformemente. Además, no dude en cambiar ($i * (100% / $image_count)) a ($i * VALUE) para el espaciado fijo.

Answer 4

Un truco feo podría estar insertando varias veces, de manera sistemática, la misma imagen (utilizando múltiples fondos ):

Ej. 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 funciona en IE bajo la versión 9 ( source ).

Answer 5

no.

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