répétez les css de l'image de fond un certain nombre de fois

Un vilain hack pourrait être d'insérer plusieurs fois, de manière statique, la même image (à l'aide de des arrière-plans multiples):

E. g. Répéter horizontalement une image (80x80) trois fois:

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;

Attention: ne fonctionne pas sur IE moins de 9 version (source).

Vous pouvez combiner un peu de jQuery avec CSS pour réaliser ce que vous voulez.

Dites que vous voulez afficher l'image foo.png 3 fois horizontalement et 2 fois à la verticale.

CSS:

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

jQuery:

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

En outre, vous pouvez coller le même code à l'intérieur de $(window).redimensionner() pour obtenir une réponse dynamique.

Bien que n'étant pas strictement répétition d'une image x-nombre de fois, @gcbenison dit, vous pouvez utiliser le background-repeat: space de la propriété ou, de même, la background-position: round et de combiner l'une de ces avec background-size pour assurer un nombre de répétitions pour une image d'arrière-plan sont affichés, et puis peut-être ajuster la taille de l'emballage pour les accueillir.

Les deux space et repeat vais le répéter une image d'arrière-plan à l'infini tant que l'intégralité de l'image peut être affichée, mais pour le reste space va ajouter un espace entre les images tout en round permettra de redimensionner les images. Mis simplement, si l'image de fond s'adapte 3.342 fois verticalement puis les deux space et round montrera l'image 3 fois, avec space l'ajout d'un espace entre chaque image répétée, et round de mise à l'échelle les images vers le haut (ou vers le bas, si nécessaire) afin de combler l'écart.

Si vous voulez répéter une image 5 fois, chaque image étant à 20 pixels de large et espacées 5px entre, vous pourriez simplement faire ceci:

.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

L'autre option (si vous ne pouvez pas définir la largeur) est l'utilisation de la solution de @franzlorenzon et il suffit de déclarer l'arrière-plan x-nombre de fois en utilisant le multiple d'arrière-plan d'une propriété CSS.

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

En outre, vous pouvez enregistrer de taper plusieurs lignes à l'aide de SASS par la création d'un @for boucle comme ceci:

$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;
}

Ce sera ensuite générer les images d'arrière-plan, tous uniformément espacées. En outre, n'hésitez pas à changer ($i * (100% /$image_count)) à ($i * VALUE) pour un espacement fixe.