CSS: Randomly distributed background image?

Question

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

score 5 · Accepted Answer · edited Feb 28 '16 at 23:55

5

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.

edited Feb 28 '16 at 23:55

Nicola

364
3
11

answered Jun 28 '13 at 19:45

ScottS

71,703
13
126
146

1

This is fantastic! Well, I'll have to think about it for a while and see how exactly and if I'll apply it, but thank you very much for the article since it is absolutely interesting and brilliant. – DavidTonarini Jun 30 '13 at 13:49

score 2 · Answer 2 · answered Feb 01 '21 at 07:02

My solution is to use the same image twice (we can put as many background images we want). Then use different repeat-x and background positions to dictate the final look of the background. My solution is as follows:

background-color: white;
background-image: url(../../../../../assets/images/my-watermark.png),
  url(../../../../../assets/images/my-watermark.png);
background-repeat: repeat-x, repeat-x;
background-position-y: -60px, 400px;
background-position-x: -150px, -270px;

score 1 · Answer 3 · edited May 23 '17 at 12:15

1

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.

edited May 23 '17 at 12:15

Community

1
1

answered Jun 28 '13 at 19:35

Arth Du

807
4
6

Thanks, I need to figure out the details but this is a pretty good setup. – DavidTonarini Jun 30 '13 at 13:49

CSS: Randomly distributed background image?

3 Answers3

Linked