Annoying grid appearing in Google Chrome

[beeswax]

I'm building a site - Project Tommy Atkins | Creatively Commemorating WW1 which seems fine in IE 9/10 and Firefox, but in Google Chrome displays a grid in the graduated header background (see attached; on the left is the header in IE9, on the right in Chrome). This grid doesn't appear on any other sites I visit in Chrome. I'm at a loss to figure this one out.

[Marci]

You have WebKit browser-specific CSS, which only applies to Safari / Chrome & other webkit based browsers... remove the below from your CSS and the grid will vanish...

 

.rt-showcase-pattern {
   background-image: -webkit-linear-gradient(rgba(0,0,0,0.1) 2px,transparent 2px), -webkit-linear-gradient(0,rgba(0,0,0,0.1) 2px,transparent 2px), -webkit-linear-gradient(rgba(0,0,0,0.1) 1px,transparent 1px), -webkit-linear-gradient(0,rgba(0,0,0,0.1) 1px,transparent 1px);
   background-size: 80px 80px, 80px 80px, 5px 5px, 5px 5px;
   background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
}

Edited July 22, 2013 by Marci

[beeswax]

Worked a treat. Grazie mille.