Prevent repeating background from clipping

Question

I have the following example: http://jsfiddle.net/umxvq52j/ of a repeat background of stars.

CSS:

.stars
{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 320px;
    background: url('http://i59.tinypic.com/2i95zzk.png') left center repeat-x;
}

What I want to do is make it so that the stars perfectly fill the space and you don't get the edges of the stars cropped! So if I'm on a smaller screen it will show 2-3 stars flush, then 6-7 etc, and never show half a star.

Is this possible?

Answer 1

I don't know if this is what you are looking for but take a look at the round attribute of background

background: url('http://i59.tinypic.com/2i95zzk.png') round 0 0;

Credit goes to CSS3 background spacing