CODEWITHSUNDEEP
javascriptcanvas
stefvhuynh
stefvhuynh

Reputation: 166

Making a checkerboard in html/javascript without canvas?

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.

Upvotes: 0

Views: 1924

Answers (2)

Shmiddty
Shmiddty

Reputation: 13967

As Christopher mentioned, you can create a 2x2 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);

Upvotes: 1

Christopher Marshall
Christopher Marshall

Reputation: 10736

You could fake it by creating an image 200px x 100px with your green/yellow background and just repeat it.

.chessboard-container {
 background:url('chess-tile.gif') repeat;
}

Upvotes: 0

Related Questions