Adding a full screen background image to Drupal 7 / Bartik theme

Question

Has anyone managed adding an image as background to a Drupal 7 with default Bartik theme?

Maybe using a fullscreenr plugin for jQuery?

I'm not sure where to store that code best and do I need to include jQuery or is it already included (I suppose it is included, but you can't call $() for some reason there? What does it mean to be changed in fullscreenr code below?)

And how can I call $.fn.fullscreenr (or whatever should be called to plant the background image) in Drupal?

Thank you! Alex

/**
* 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);

Answer 1

Are you actually trying to use fullscreenr because you want a full screen background image that re-sizes with the browser? Or do you just want to have a background image?

If you're just looking to use a background image, you don't need jQuery. You can just edit the CSS. Though, if you're changing a builtin theme like Bartik, you should actually create a subtheme instead of editing the builtin theme's files.

If you actually need fullscreenr then you need to add the javascript files for the plugin and your file that calls the fullscreenr method to your theme's .info file (again, you should not edit the builtin theme's files, you should create your own subtheme). In the example below, I'm just editing Bartik's files (don't do this, use a subtheme). You should add the following to the theme's .info file

stylesheets[all][] = jquery/fullscreenr/css/fsbg-style.css
scripts[] = jquery/fullscreenr/js/jquery.fullscreenr.js
scripts[] = js/fullscreenbg.js

In this example, I added a jquery folder to the theme's folder and put the fullscreenr folder containing the plug-in into the jquery folder. I also slightly renamed the style.css file that comes with the plugin (in addition to deleting all the extra option stuff from that file). I put my code for actually calling the plug-in into the js/fullscreenbg.js file. The code looks like (details on why it's wrapped like that in the Drupal docs for changes from D6 to D7):

(function ($) {
  // You need to specify the size of your background image here (could be done automatically by some PHP code)
  var FullscreenrOptions = { width: 1024, height: 768, bgID: '#bgimg' };
  // This will activate the full screen background!
  jQuery.fn.fullscreenr(FullscreenrOptions); 
}(jQuery));    

I think this was the part you were really having trouble with.

There are some other minor things you need to do to set up the fullscreenr plug-in. I highly suggest getting it to work on a very basic html page outside of Drupal before putting it into a Drupal theme so you know you're at least using the plug-in correctly. Also, keep in mind that Bartik has a lot of other stuff going on with background colors and such on various parts of the page, so just adding the background image without editing the theme's CSS is not going to appear to make any difference.