1

I am referring to a friends website at http://www.gamezilla.co.za.

The background image is streched with a jQuery plugin (backstretch), but the images has a very light grid mask over it. How do you add this mask to a background-image using CSS or jQuery?

The background image does not have the mask on it as shown here (http://www.gamezilla.co.za/wp-content/uploads/2012/09/b_homepage.jpg)

Any idea how it works?

Scrimothy
  • 2,536
  • 14
  • 23
mauzilla
  • 3,574
  • 10
  • 50
  • 86

1 Answers1

3

He has a span with an ID of #pattern-filter which contains a 2x2 pixel image that repeats itself over the top of the image.

See line 338 of the 224add20.273d39.css file.

#pattern-filter {
 position:fixed;
 width:100%;
 height:100%;
 background:url(/wp-content/themes/gonzo/images/pattern-filter.png) scroll transparent
}
Billy Moat
  • 20,792
  • 7
  • 45
  • 37
  • Thank you for your answer, it works, I added a similiar div inside my background-div. Where does he declare the #pattern-filter though? It is not part of the dom elements after load – mauzilla Oct 29 '12 at 17:23
  • It sits at the bottom of the DIV with the ID of 'backstretch'. – Billy Moat Oct 29 '12 at 23:09