 <p>In the example you refer at the fancybox website, the fancybox's <code>overlay</code> has transparency so you can always see the background, however, you can always set the fancybox's overlay's background with a solid color and the (body's) background won't be visible.</p> <p><strong>Method 1</strong> (rgba) </p> <pre><code>$(".fancybox").fancybox({ helpers: { overlay: { css: { 'background': 'rgba(64, 64, 64, 1)' } } } }); </code></pre> <p>... the last number sets the transparency of the overlay so <strong>1 = full solid</strong> (no visible body's background) regardless there is a slow fade transition or not.</p> <p>See <strong><a href="http://jsfiddle.net/KZRax/" rel="nofollow">JSFIDDLE</a></strong></p> <p><strong>Method 2</strong> (hex) </p> <pre><code>$(".fancybox").fancybox({ helpers: { overlay: { css: { 'background': '#4a4a4a' } } } }); </code></pre> <p>... set an hex color value and the fancybox's overlay will be full solid (no visible body's background).</p> <p>See <strong><a href="http://jsfiddle.net/X5s5e/" rel="nofollow">JSFIDDLE</a></strong></p>