Fullscreen Background (jQuery)

10_fullscreen_background.html

<div class="bgh">
  <img src="path/to/image.jpg"/>
</div>

20_Fullscreen_Background.js

/**
* Fullscreenr - lightweight full screen background jquery plugin
* By Jan Schneiders
* Version 1.0
* www.nanotux.com
**/
(function($){  
  $.fn.fullscreenr = function(options) {
    if(options.height === undefined) alert('Please supply the background image height, default values will now be used. These may be very inaccurate.');
    if(options.width === undefined) alert('Please supply the background image width, default values will now be used. These may be very inaccurate.');
    if(options.bgID === undefined) alert('Please supply the background image ID, default #bgimg will now be used.');
    var defaults = { width: 1280,  height: 1024, bgID: 'bgimg' };
    var options = $.extend({}, defaults, options); 
    $(document).ready(function() { $(options.bgID).fullscreenrResizer(options);  });
    $(window).bind("resize", function() { $(options.bgID).fullscreenrResizer(options); });    
    return this;     
  };  
  $.fn.fullscreenrResizer = function(options) {
    // Set bg size
    var ratio = options.height / options.width;  
    // Get browser window size
    var browserwidth = $(window).width();
    var browserheight = $(window).height();
    // Scale the image
    if ((browserheight/browserwidth) > ratio){
        $(this).height(browserheight);
        $(this).width(browserheight / ratio);
    } else {
        $(this).width(browserwidth);
        $(this).height(browserwidth * ratio);
    }
    // Center the image
    $(this).css('left', (browserwidth - $(this).width())/2);
    $(this).css('top', (browserheight - $(this).height())/2);
    return this;     
  };
})(jQuery);

$(window).load(function() {    


         // You need to specify the size of your background image here (could be done automatically by some PHP code)      
         var FullscreenrOptions = {  width: 1920, height: 1080, bgID: '.bgh img' };      
         // This will activate the full screen background!      
         jQuery.fn.fullscreenr(FullscreenrOptions);   
  
         // You need to specify the size of your background image here (could be done automatically by some PHP code)      
         //var FullscreenrOptions2 = {  width: 1920, height: 1080, bgID: '.SEG2 .SEGimgWrap img' };      
         // This will activate the full screen background!      
         //jQuery.fn.fullscreenr(FullscreenrOptions2);

});

30_fullscreen_background_random.php

temp.randomContent = COA_INT 
temp.randomContent { 
  10 = CONTENT 
  10.wrap = <div class="bgh">|</div>
  10 { 
    table = tt_content 
    select { 
      # ID der Seitte wo die content Elemente gespeichert sind 
      pidInList = 6 
      where = colPos=0
      # Wieviele Elemente angezeigt werden sollen 
      max = 1
      orderBy = rand() 
    } 
    stdWrap.split { 
      token = ###SPLITTER###
      wrap = |*| | |*|
    } 
  } 
}
#Read more: http://www.typo3wizard.com/de/snippets/general-config/random-content.html#ixzz1otwECvfA 
#Under Creative Commons License: Attribution