Search code examples
cssbackground-imagerepeat

CSS: Randomly distributed background image?

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

Solution

  • 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.