I have a website with a repeated background image.
background: url(images/back_small.png) repeat center center fixed;
I would like it more, however, if the image were not repeated one copy after an other, to add some variation. The final result should be a sort of a dotted pattern where the image appears now and then, instead of being instantly repeated.
I have no idea if this is possible with CSS, but if so... I'm waiting for idea :D
I recommend using a variation of the multiple background technique where you save your image with differing sizes of transparent "space" around it based off prime numbers.
It is known as the Cicada Principle on this site.
The prime numbers introduce the "randomness." Of course, if you do not want them to overlap in any way, then you will need to be very selective exactly what image sizes to use to insure no direct overlap occurs within a normal size monitor display.
There's not really a way to do exactly what you're asking in pure CSS. I have however seen people introduce "noise" into a site's background using multiple images.
Here's an example of using multiple backgrounds with CSS.
Here's a stackoverflow question regarding noise in gradients.
Hopefully this gives you some ideas to get a feel for what you want on your site.
