using htmt5 gradient and javascript, simulate wood grain

have a chess board in TABLE, each square a TD.

how would one use html5 gradi开发者_运维知识库ents (and javascript for randomness) to create a wood texture background for the dark squares?

I'm grabbing a big wood texture (change to one you like) and grabbing a random piece of it at 50% opacity, then underneath is a random brownish color to add a unique undertone to each square. You can adjust all these to get an effect you want. I messed with some gradients and they looked silly.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<style>
div {
    width: 100px; height: 100px; margin: 1px;
}
div.texture {
    background: url(http://gallery.hd.org/_exhibits/textures/wood-grain-closeup-1-DHD.jpg);
    opacity:0.4; filter:alpha(opacity=100);
}
</style>
<script>
$(function(){
    $('div.bg').each(function(){

        // make each square a random brown
        var browns = new Array('CD853F','8B4513','A0522D');
        var col = Math.floor(Math.random()*3);
        $(this).css('background-color',browns[col]);

        // the dimensions of your texture minus square size
        var image_width = 500;
        var image_height = 400;

        // get a random positions
        var x = Math.floor(Math.random()*image_width);
        var y = Math.floor(Math.random()*image_height);

        // make them negative
        x = x - (x * 2);
        y = y - (y * 2);

        var d = $(this).children('div.texture');
        d.css('background-position', x+'px'+' '+y+'px');
    });
});
</script>
<div class='bg'><div class='texture'></div>
<div class='bg'><div class='texture'></div>