Riddle me this... Just for fun

Just for fun…

Create a background-color that paints every third pixel.
Like this:

My solution:

let body = document.getElementById('theBody');
for (let i = 0; i < window.innerHeight; i += 3) {
    for (let j = 0; j < window.innerWidth; j += 3) {
        pix = document.createElement('div');
        pix.style.cssText = `
            display: block;
            width: 1px;
            height: 1px;
            background-color: red;
            position: absolute;
            top: ${i}px;
            left: ${j}px;

Share your solution :slight_smile:

One questions:
Is there a way of doing it with pure css (without javascript) or at least a way that doesn’t affect the performance/loading time of the page?

Have a nice day campers :+1:

1 Like

You can paint a single dot pattern and let background-repeat fill out the rest.

body {
  background-color: #fff;
  background-image: radial-gradient(red 0.6px, #fff 0.6px);
  background-size: 3px 3px;

It might not look exactly the same as what you have.


Thank you @lasjorg :slight_smile:
This looks great.

And unlike my solution, there is no impact on performance!

It’s a closed topic, but here’s another solution I’ve just discovered:

Using image data URI:

body {

If you’re interested, you can check this out:


This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.