A few months ago, I posted an example of how it is now possible to create PhotoShop style headings using new properties being developed for CSS3. Along the same lines, all current browsers now recognise the "linear-gradient" property and can also implement a "repeating" version of it by placing commas between each declaration. The following is an example of how a green grid is generated on a white background:- body { background-image: linear-gradient(#ac9 1px, transparent 1px), linear-gradient(0deg, #ac9 1px, transparent 1px), linear-gradient(rgba(170,204,153,0.5) 1px, transparent 1px), linear-gradient(0deg, rgba(170,204,153,0.5) 1px, transparent 1px); background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px; background-position: -1px -1px, -1px -1px; background-color: #fff; } None of the browser vendors have at this stage committed to the standardized format, and in the case of the background-image declaration, each "linear-gradient" will need to be prefixed with a vendor prefix, e.g. -moz-, -ms-, -o-, or -webkit-. For those that recognise that "0deg" can be written without the "deg", the bad news is that the Microsoft version will not render without the "deg" suffix, and as a form of self protection I've added the "deg" suffix to all the declarations. A page showing the above background is at:- http://freepages.rootsweb.com/~bristowe/test/sine-wave.html The little animation on the page will only show in those browsers that support the HTML5 Canvas tag, and if your browser doesn't support the "linear-gradient" property, the background will be a red grid image.