CSS - CSS3 pixelate dot background

Question

Is it possible or is there a trick to make a background pixelated like the one in the image attached?

I use a background image, but as you can see it doesn't scale and it flashs on page scrolling.

Enter image description here

Now I have CSS thanks to vlcekmi3:

background-color: white;
background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
    linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
background-size:100px 100px;
background-position: 0 0, 50px 50px;

But I'm unable to make it exactly like the image. Can someone check it?

Any code, resource, tutorial, and suggestion is appreciated.

maybe found something helpfull http://dabblet.com/gist/1457677 — mychalvlcek, Nov 28 '12 at 14:29
you can't make this flicker effect disappear, it's due to the high contrast of the pixels and your human eye. It doesn't matter if it's an image or a gradient. you need to increase the space between the pixels to make it disappear. — Christoph, Nov 28 '12 at 16:35
It's actually much shorter if you simply use a base64 encoded image: http://jsfiddle.net/thirtydot/v7T98/3/ — thirtydot, Nov 28 '12 at 17:04
@itsme I don't think it matters if it's an embedded image data url. As long as it's not a real image, it's a valid and in fact a great answer! — Sanjay Verma, Sep 03 '20 at 06:24

score 69 · Answer 1 · answered Jul 27 '13 at 01:26

69

From thirtydot's comment in the first post. Should have posted it as an answer - Brilliant. I almost missed it. Please rate his comment up :) I am only posting this as an answer so it might help others as it helped me.

Using a base64 encoded message:

background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABZJREFUeNpi2r9//38gYGAEESAAEGAAasgJOgzOKCoAAAAASUVORK5CYII=);

http://jsfiddle.net/thirtydot/v7T98/3/

answered Jul 27 '13 at 01:26

Onimusha

3,348
2
26
32

1

@T.J.Crowder Thanks. But I have no idea what Community Wiki is. I'll check it up although in all these years, this is pretty much the only comment I've posted as answer because it was too good to be hidden away in the comments. – Onimusha Aug 17 '15 at 10:00
3

@Onimusha: It's a tickbox on the bottom right of the Post an Answer form. [More](http://meta.stackexchange.com/questions/11740/what-are-community-wiki-posts) – T.J. Crowder Aug 17 '15 at 10:04
2

"I use a background image, but as you can see it doesn't scale" This doesn't scale. – James South Oct 24 '16 at 13:20
2

use this base64 image, it is smaller! :) `background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAAAAABX3VL4AAAADklEQVQI12P4/5/hPwMACvsC/tmfKMUAAAAASUVORK5CYII=);` – Mneckoee Nov 16 '16 at 07:39
1

One advantage of the accepted answer over this one is that you can customize the appearance to suit your design. – carl Apr 24 '18 at 21:57

score 31 · Accepted Answer · edited Aug 15 '15 at 20:28

Here's the best I could come up with to match your image. It's adapted from the example here by Lea Verou What will be your fallback for non css3 browsers?

body {
    background-image: -moz-linear-gradient(45deg, #666 25%, transparent 25%), 
        -moz-linear-gradient(-45deg, #666 25%, transparent 25%), 
        -moz-linear-gradient(45deg, transparent 75%, #666 75%), 
        -moz-linear-gradient(-45deg, transparent 75%, #666 75%);
    background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #666), color-stop(.25, transparent)), 
        -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #666), color-stop(.25, transparent)), 
        -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #666)), 
        -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #666));
    background-image: -webkit-linear-gradient(45deg, #666 25%, transparent 25%), 
        -webkit-linear-gradient(-45deg, #666 25%, transparent 25%), 
        -webkit-linear-gradient(45deg, transparent 75%, #666 75%), 
        -webkit-linear-gradient(-45deg, transparent 75%, #666 75%);
    background-image: -o-linear-gradient(45deg, #666 25%, transparent 25%), 
        -o-linear-gradient(-45deg, #666 25%, transparent 25%), 
        -o-linear-gradient(45deg, transparent 75%, #666 75%), 
        -o-linear-gradient(-45deg, transparent 75%, #666 75%);
    background-image: linear-gradient(45deg, #666 25%, transparent 25%), 
        linear-gradient(-45deg, #666 25%, transparent 25%), 
        linear-gradient(45deg, transparent 75%, #666 75%), 
        linear-gradient(-45deg, transparent 75%, #666 75%);
    -moz-background-size: 2px 2px;
    background-size: 2px 2px;
    -webkit-background-size: 2px 2.1px; /* override value for webkit */
    background-position: 0 0, 1px 0, 1px -1px, 0px 1px;
}

jsfiddle example

score 9 · Answer 3 · edited Apr 13 '17 at 12:46

The "flickering" you observe is is not a software issue, but a hardware one. Basically, it's caused by that fact that the pixels on your screen can't change color instantly. Since your dotted background consists of alternating rows of pixels, any time you scroll down by an odd number of pixels, there will be a brief moment when your screen is switching between two shifted copies of the pattern, and this will appear as flicker.

This thread on Graphic Design Stack Exchange features an even more dramatic example of the same effect, and also explains why it happens in more detail. Just for a quick demonstration, let me borrow one of the images from Volker Siegel's answer:

Note how, on most screens, this image will show a noticeable "pulsing" effect when scrolled. (It may also appear to flicker a bit even while just looking at it, simply because the photoreceptors in your eyes also have some response delay and adaptation effects.)

Anyway, the only way you can stop your dotted background from flickering while scrolling is to make it not scroll. Fortunately, there's a CSS property just for that:

background-attachment: fixed;

Other than that, there's not much else to it. The best way to actually render the background is almost certainly with a simple two-color PNG image. You can even make the image semitransparent, so that you can layer it on top of different colored backgrounds. See the snippet below for a demonstration:

body {
  background-color: white;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGUlEQVQ4y2NgoBJwoJAedcGoC0ZdMOAuAABF0hABJ/8lyQAAAABJRU5ErkJggg==);
  background-attachment: fixed;
}

<p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p>
<p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p>
<p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p>
<p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p>

Note how the pattern does not flicker when you scroll it with the inner scroll bar. (It does flicker when you scroll the whole SO page, because the pattern is attached to the <iframe> it's displayed in, and will scroll along with it.)

^{(BTW, the inline image I've used in the snippet above is 16 × 16 pixels, even though the actual pattern is just 2 × 2 pixels. Repeating it a few times doesn't cost much in terms of file size, though, and might be slightly safer, as I seem to recall some older browsers having issues with very small background images.)}

score 7 · Answer 4 · answered Apr 03 '18 at 17:35

How about this one?

.card {
  background: linear-gradient(90deg, #fff 2px, transparent 1%) center, linear-gradient(#fff 2px, transparent 1%) center, #ccc;
  background-size: 5px 5px;
  
  height: 10em;
  width: 30em;
  position: relative;
}

.text {
  font-size: 2em;  
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

<div class="card">
  <div class="text">
    Hello world!
  </div>
</div>

In general the formula is

// color
$bg-color: #fff;
$dot-color: $gray-darker;

// Dimensions
$dot-size: 3px;
$dot-space: 5px;

background: linear-gradient(90deg, $bg-color ($dot-space - $dot-size), transparent 1%) center,
linear-gradient($bg-color ($dot-space - $dot-size), transparent 1%) center, $dot-color;
background-size: $dot-space $dot-space;

as seen @ https://codepen.io/edmundojr/pen/xOYJGw

score 0 · Answer 5 · edited Aug 17 '15 at 09:07

0

This is because of background-size, so just try this:

background-size:2px 2px;

edited Aug 17 '15 at 09:07

Peter Mortensen

30,738
21
105
131

answered Dec 06 '13 at 12:08

Dinnu Buddy

369
1
3
13

score 0 · Answer 6 · answered Aug 15 '17 at 19:35

0

Without all the browser prefixes:

background: linear-gradient(
    45deg,
    #fff,
    #fff 50%,
    #000 50%,
    #000
);
background-size: 2px 2px;

answered Aug 15 '17 at 19:35

Devin Price

426
5
10

CSS - CSS3 pixelate dot background

6 Answers6

Linked