repeat css background image a set number of times

Question

is there a way to set the number of times a background image repeats with css?

Answer 1

Whilst not strictly repeating an image x-number of times, as @gcbenison stated, you can use the background-repeat: space property or, similarly, the background-position: round and combine either of these with background-size to ensure a set number of repetitions for a background image are shown, and then perhaps adjust the size of the wrapper to accomodate.

Both space and repeat will repeat a background image infinitely as long as the entire image can be shown, though for any remainder space will add a gap between the images whilst round will scale the images. Put simply, if the background image fits 3.342 times vertically then both space and round will show the image 3 times, with space adding a gap between each repeated image, and round scaling the images up (or down, if necessary) to fill the gap.

If you thus wanted to repeat an image 5 times, with each image being 20px wide and spaced 5px between, you could simply do this:

.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

The other option (if you cannot set the width) is to use the solution from @franzlorenzon and simply declare the background x-number of times using the multiple background CSS property.

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

In addition, you can save typing out multiple lines using SASS by creating a @for loop like so:

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

This will then generate the background images, all evenly spaced out. Additionally feel free to change ($i * (100% / $image_count)) to ($i * VALUE) for fixed spacing.