How to apply HTML5 fullscreen API to div background image

Question

Want to apply HTML 5 fullscreen APi to background image of div

<div class="bgimg" style="background-image:url('img/home-1.jpg')" />
   <img src="img/fullscreen.png" id="fullscreen-btn">
</div>

I want onclick fullscreen-btn background image of div bgimg ie home-1.jpg should open in fullscreen. I tried below code but not workin Kindlt suggest

<scritpt>
$(function() {
    var bg = $('.bgimg');
    $('#fullscreen-btn').click(function () {   
      goFullScreen(bg.attr('style', 'background-image:url()')); 
    });
});

function goFullScreen( element )
{
    if ( element === undefined )
    {
        // If no element defined, use entire document
        element = document.documentElement;
    }

    if ( element.requestFullScreen )
    {
        // Spec, supported by Opera 12.1+
        element.requestFullScreen();
    }
    else if ( element.mozRequestFullScreen )
    {
        // Supported by Firefox 10+
        element.mozRequestFullScreen();
    }
    else if ( element.webkitRequestFullScreen )
    {
        // Supported by Chrome 15+ & Safari 5.1+
        element.webkitRequestFullScreen();
    }
    // Still no IE support, sorry folks :( 
}

Answer 1

Seems to be working for me. You just needed to add the image path in your javascript with quotes around it.

$(function() {
    var bg = $('.bgimg');
    $('#fullscreen-btn').click(function () {   
      goFullScreen(bg.attr('style', "background-image:url('img/home-1.jpg')")); 
    });
});

FIDDLE

Answer 2

I believe, but will admit am not 100% sure, that the fullscreen API can only full screen an HTML element . So that is why it will fullscreen div.bgimg but will not fullscreen the background image of the element. <img> is an HTML element, however, so I would think that would work. Is there any reason you would not want to use that instead of setting the background image of your divs?

If so, you could try to wire up some JS that connects visible divs with the background images (Like what you have now) to invisible images and load those to your fullscreen script instead.