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;
        `;
        body.appendChild(pix);
    }
}

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.

2 Likes

Thank you @lasjorg :slight_smile:
This looks great.

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

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

Using image data URI:

body {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAAXNSR0IArs4c6QAAAB1JREFUGFdjvKGg8F/jwQNGBiAAEzAA4YDI/wwMAI3VBQT7AkCWAAAAAElFTkSuQmCC) repeat;
}

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

:smile:

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