// EXAMPLE:
// http://jsfiddle.net/vvvvvv/3r0wLk5L/

// https://addons.mozilla.org/ru/firefox/addon/pixel-perfect/

(function(){
  var CONFIG = {
    // Change to real path/to/image.png
    path: 'image.png',
    // Change to height of background image
    height: '400',
    // Preferred key binding
    keys: 'alt+q',
  };
  function loadExtScript(src,test,callback) {
    if(window.jQuery) {
      callback();
    } else {
      var s = document.createElement('script');
      s.src = src;
      document.body.appendChild(s);
      var callbackTimer = setInterval(function(){
        var call = false;
        try {
          call = test.call();
        } catch(e) {}
        if(call) {
          clearInterval(callbackTimer);
          callback.call();
        }
      },100);
    }
  }
  loadExtScript('https://yandex.st/jquery/2.1.1/jquery.min.js',function(){
    return (typeof $ == 'function');
  },function(){
    $(function(){
      $.ajax({
        type: 'GET',
        url: 'https://rawgit.com/jeresig/jquery.hotkeys/master/jquery.hotkeys.js',
        dataType: 'script',
        success: function(){
          $('body').prepend('<div id="pixp" style="background: url('+CONFIG.path+') top center no-repeat; position: absolute; width: 100%; top: '+parseInt($('body').css('margin-top'))+'px; height: '+CONFIG.height+'px; opacity: .5; z-index: -1;"></div>');
          $('#pixp').css({
            'width': ( $('body').width() - ( parseInt($('body').css('margin-left')) + parseInt($('body').css('margin-right')) ) )+'px',
            'padding': $('body').css('margin'),
          });
          $(document).bind('keydown',CONFIG.keys,function(){
            if($('#pixp').css('opacity') == 1) {
              $('body > *').fadeTo(0,1);
              $('#pixp').fadeTo(0,0.5);
            } else {
              $('body > *').fadeTo(0,0.5);
              $('#pixp').fadeTo(0,1);
            }
          });
        },
      });
    });
  });
})();

// EXAMPLE:
// http://jsfiddle.net/vvvvvv/3r0wLk5L/

// https://addons.mozilla.org/ru/firefox/addon/pixel-perfect/

(function(){
  var CONFIG = {
    // Change to real path/to/image.png
    path: 'image.png',
    // Change to height of background image
    height: '400',
    // Preferred key binding
    keys: 'alt+q',
  };
  function loadExtScript(src,test,callback) {
    if(window.jQuery) {
      callback();
    } else {
      var s = document.createElement('script');
      s.src = src;
      document.body.appendChild(s);
      var callbackTimer = setInterval(function(){
        var call = false;
        try {
          call = test.call();
        } catch(e) {}
        if(call) {
          clearInterval(callbackTimer);
          callback.call();
        }
      },100);
    }
  }
  loadExtScript('https://yandex.st/jquery/2.1.1/jquery.min.js',function(){
    return (typeof $ == 'function');
  },function(){
    $(function(){
      $.ajax({
        type: 'GET',
        url: 'https://rawgit.com/jeresig/jquery.hotkeys/master/jquery.hotkeys.js',
        dataType: 'script',
        success: function(){
          $('body').prepend('<div id="pixp" style="background: url('+CONFIG.path+') top center no-repeat; position: absolute; top: '+parseInt($('body').css('margin'))+'px; width: '+($('body').width()-parseInt($('body').css('margin'))*2)+'px; height: '+CONFIG.height+'px; opacity: .5; z-index: -1;"></div>');
          $(document).bind('keydown',CONFIG.keys,function(){
            if($('#pixp').css('opacity') == 1) {
              $('body > *').fadeTo(0,1);
              $('#pixp').fadeTo(0,0.5);
            } else {
              $('body > *').fadeTo(0,0.5);
              $('#pixp').fadeTo(0,1);
            }
          });
        },
      });
    });
  });
})();

http://jsfiddle.net/vvvvvv/3r0wLk5L/

Pixel Perfect technique with jQuery

Pixel Perfect technique with jQuery

JavaScript