Fullscreen Background Image Swap
<p>I am using Fullscreenr for the fullscreen background:</p>

<p>jquery:</p>

<pre><code>var FullscreenrOptions = {  width: 1209, height: 770, bgID: '#bgimg' };
jQuery.fn.fullscreenr(FullscreenrOptions);
</code></pre>

<p>html:
<code>&lt;img id="bgimg" src="images/bg1.jpg"&gt;</code></p>

<p>To swap background image on navigation hover:</p>

<pre><code>  $('#about').hover(function() {
         $('#bgimg').attr('src', 'images/aboutbg.jpg');
         }, function () {
         $('#bgimg').attr('src', 'images/bg1.jpg');
});


  $('#work').hover(function() {
         $('#bgimg').attr('src', 'images/workbg.jpg');
         }, function () {
         $('#bgimg').attr('src', 'images/bg1.jpg');
});
</code></pre>

<p>and so on.  This works fine for the homepage.</p>

<p>What I would like to do is when you are on the ABOUT page (or other specific pages), I would like the fallback background to be the pages background.</p>

<p>For instance, the ABOUT page, I changed:
<code>&lt;img id="bgimg" src="images/bg1.jpg"&gt;</code></p>

<p>to:
<code>&lt;img id="bgimg" src="images/aboutbg.jpg"&gt;</code></p>

<p>This works on refresh, but when you mouseout of the navigation, it still falls back to bg1.jpg.  </p>

<p>Is there a way I can pull the id="bgimg" image of current page instead of calling the src in:</p>

<pre><code>         $('#bgimg').attr('src', 'images/bg1.jpg');
</code></pre>

<p>Does this make any sense??  Thanks for any help.  </p>

<p><a href="http://www.juliandiazvelosa.com" rel="nofollow">Link to site</a></p>
