Creating a Pixelated Dot Background with CSS3

Question

Creating a Pixelated Dot Background with CSS3

Is there a way to achieve a pixelated background effect similar to the attached image?

I have been using a background image, but it doesn't scale properly and flashes when the page is scrolled.

Thanks to vlcekmi3, I now have this CSS:

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;

However, I'm struggling to make it look exactly like the reference image. Any assistance in checking it would be greatly appreciated.

Feel free to provide any code snippets, resources, tutorials, or suggestions that could help achieve the desired effect.

css background pixelate

Answer 1

Answer №1

Found this gem in a comment by thirtydot on the first post. It was so good, I almost missed it - definitely deserving of being posted as an answer. If you agree, please give his comment a thumbs up! I decided to share it here in case it can benefit others like it did for me.

Check out this base64 encoded message:

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

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

Answer 2

Found this gem in a comment by thirtydot on the first post. It was so good, I almost missed it - definitely deserving of being posted as an answer. If you agree, please give his comment a thumbs up! I decided to share it here in case it can benefit others like it did for me.

Check out this base64 encoded message:

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

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

Answer 3

Answer №2

After studying your image, I have crafted the following code inspired by Lea Verou's example. What alternative will you provide for browsers that do not support CSS3?

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; /* modify value specifically for webkit */
    background-position: 0 0, 1px 0, 1px -1px, 0px 1px;
}

See jsfiddle demonstration

Answer 4

After studying your image, I have crafted the following code inspired by Lea Verou's example. What alternative will you provide for browsers that do not support CSS3?

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; /* modify value specifically for webkit */
    background-position: 0 0, 1px 0, 1px -1px, 0px 1px;
}

See jsfiddle demonstration

Answer 5

Answer №3

The "flickering" you're seeing is not caused by software, but by hardware limitations. Essentially, the pixels on your screen cannot change color instantaneously. When scrolling down by an odd number of pixels, there will be a moment where the screen is transitioning between two slightly shifted versions of the pattern, creating the flicker effect.

For a more dramatic example and detailed explanation of this phenomenon, check out this discussion on Graphic Design Stack Exchange. To prevent the flickering while scrolling, you can use the CSS property:

background-attachment: fixed;

Using a simple two-color PNG image as the background is recommended to avoid flickering. You can also make the image semi-transparent to overlay on different colored backgrounds. Here's 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>

To see that the pattern does not flicker when scrolled with the inner scroll bar, try the code snippet above. The pattern may flicker if you scroll the entire page, as it's attached to the iframe in which it's displayed.

^{(By the way, I've used a 16x16 pixel version of the image in the snippet for compatibility reasons, although the actual pattern is just 2x2 pixels. Repeating it doesn't significantly increase file size and avoids potential issues with older browsers.)}

Answer 6

The "flickering" you're seeing is not caused by software, but by hardware limitations. Essentially, the pixels on your screen cannot change color instantaneously. When scrolling down by an odd number of pixels, there will be a moment where the screen is transitioning between two slightly shifted versions of the pattern, creating the flicker effect.

For a more dramatic example and detailed explanation of this phenomenon, check out this discussion on Graphic Design Stack Exchange. To prevent the flickering while scrolling, you can use the CSS property:

background-attachment: fixed;

Using a simple two-color PNG image as the background is recommended to avoid flickering. You can also make the image semi-transparent to overlay on different colored backgrounds. Here's 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>

To see that the pattern does not flicker when scrolled with the inner scroll bar, try the code snippet above. The pattern may flicker if you scroll the entire page, as it's attached to the iframe in which it's displayed.

^{(By the way, I've used a 16x16 pixel version of the image in the snippet for compatibility reasons, although the actual pattern is just 2x2 pixels. Repeating it doesn't significantly increase file size and avoids potential issues with older browsers.)}

Answer 7

Answer №4

What do you think of this design?

.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>

Typically, the formula for this type of design is as follows:

// 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;

You can view a live example at https://codepen.io/edmundojr/pen/xOYJGw

Answer 8

What do you think of this design?

.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>

Typically, the formula for this type of design is as follows:

// 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;

You can view a live example at https://codepen.io/edmundojr/pen/xOYJGw

Answer 9

Answer №5

The reason for this issue is due to the background-size property, so you can resolve it by adding the following CSS:

background-size: 2px 2px;

Answer 10

The reason for this issue is due to the background-size property, so you can resolve it by adding the following CSS:

background-size: 2px 2px;

Answer 11

Answer №6

Let's simplify this code by removing all the browser prefixes:

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

Answer 12

Let's simplify this code by removing all the browser prefixes:

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

Creating a Pixelated Dot Background with CSS3

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Angular - creating adaptive HTML container with CSS styling

"Enhanced Bootstrap 4 table featuring a single column that stands out in size compared

Place items at the lower part of the container rather than the top

textarea label align: center

How can I use JavaScript to modify the style of the first unordered list (ul) element without affecting the

Can HTML text areas be designed to adjust their width automatically, as well as their height?

Looking for some guidance with Bootstrap column layouts

Creating consistent image placement across all divs: a step-by-step guide

There appears to be an empty void on the website

Drag a spinning cube using CSS and Jquery when the mouse is pressed

Designs created with shapes using HTML, CSS, and JavaScript

Issue with border-radius.htc in IE8 on a specific page (functional in a basic demo page)

concealing the dropdown in React upon clicking outside of it

Pager made the bold decision to transition from a horizontal layout to a vertical format

Top method for displaying radio buttons as switchable buttons within a web form

Minimize the use of globalized variables in your LESS CSS code

Tips for increasing the height of a div as rows are dynamically added to a table

What are some best practices for integrating CSS grid layouts with React for optimal results?

ERROR : The value was modified after it had already been checked for changes

JS/Electron Insert items individually