CSS - CSS3 pixelate dot background

css background pixelate
itsme picture itsme · Nov 28, 2012 · Viewed 66.1k times · Source

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.

Answer

Onimusha picture Onimusha · Jul 27, 2013

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/

Related questions

Stretch and scale a CSS image in the background - with CSS only

I want that my background image stretch and scale depending on the browser viewport size. I've seen some questions on Stack Overflow that do the job, like Stretch and scale CSS background for example. It works well, but I want …

Read More
div background color, to change onhover

I'm trying to make a div's background color change on mouse over. the div {background:white;} the div a:hover{background:grey; width:100%; display:block; text-decoration:none;} only the link inside the div gets the background color. what could I …

Read More
How to get div height to auto-adjust to background size?

How do I get a div to automatically adjust to the size of the background I set for it without setting a specific height (or min-height) for it?

Read More