Search code examples
jquerycssopacitymaskjquery-backstretch

Adding image opacity to background image with jQuery

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?

Solution

  • 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
}