Question

I’ve been trying to create a checkerboard pattern without using canvas. The thing is, I need a 100px by 100px square where each pixel alternates between green [rgb(0, 255, 0)] and yellow [rgb(255, 255, 0)] (like a checkerboard but at the pixel level). I can make this in html with a lot of copying and pasting… [Here] (http://jsfiddle.net/DyEq9/3/).

However, the survey software that I am using does not allow for such long code. The software also doesn’t seem to support the canvas function. Any help is appreciated.

Answer 1

As Christopher mentioned, you can create a 2×2 image version of the grid and set that as the background image, with repeating. This is probably the best solution by far.

If, for some reason this is not possible, and you have access to CSS3, you could do this:

http://jsfiddle.net/DyEq9/4/

width:100px;
height:100px;
background-size: 2px 2px;
background-position: 0 0, 1px 1px;
background-color:#ff0;
background-image: -webkit-linear-gradient(45deg, #0f0 25%, transparent 25%, transparent 75%, #0f0 75%, #0f0), -webkit-linear-gradient(45deg, #0f0 25%, transparent 25%, transparent 75%, #0f0 75%, #0f0);