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.

Answer 2

An ugly hack could be inserting multiple times —statically— the same image (using multiple backgrounds):

E.g. To repeat horizontally an image (80x80) three times:

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;

Beware: not working on IE under 9 version (source).

Answer 3

I'm not sure what originally motivated this question, but I found it searching for a way to make sure only an integral number of copies of a background image appears (i.e. do not crop the final member of a repeated set of background images.) That can be achieved via the background-repeat: space property.

Answer 4

no.

you might set a absolute width for a box but there is no css option to repeat the image n times.

Answer 5

You can combine a little jQuery with CSS to achieve what you want.

Say you want to display the image foo.png 3 times horizontally and 2 times vertically.

CSS:

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

jQuery:

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

Additionally, you could paste the same code within $(window).resize() to get a dynamic response.

Answer 6

Yes! You can set the background image size: background-size: 20%, 20%; This will make it repeat 5 times.