JQuery - scalable/resizing background image

The desire is to have a background that resizes/scales/stretches with the browser window.

Though there seems to be a CSS3 method, it isn't widely supported. There seems to be numerous JQuery methods - but they all kind of ... well, seem a little clunky or require too much manual input.

So ... I was thinking ... how about something that picks up the basics and does most of it for us?

Below is what I've gotten so far:

It's based around some existing methods like Fullscreenr, with some modifications.

<script type="text/javascript">
//<![CDATA[
$.fn.fullscreenr = function(options) {
  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;      
};

$(document).ready(function() {
  // Get the URL based on the Background property
  function extractUrl(input) {
    return input.replace(/"/g,"").replace(/url\(|\)$/ig, "");
  }

  // Get the Background CSS Property.
  imageURL = extractUrl($("body").css("background-image"));

  $('body').prepend('<div id="triquiback"></div');
  $('#triquiback').prepend('<img id="triquibackimg" src="'+imageURL+'" />');

  var triquibackcss = {
        'left'     : '0',
        'top'      : '0',
        'position' : 'fixed',
        'overflow' : 'hidden',
        'zIndex'   : '-9999'
      };

  var triquibackimgcss = {
       'position' : 'fixed'
      }; 

  $("#triquiback").css(triquibackcss);
  $("#triquibackimg").css(triquibackimgcss);
});

$(window).load(function() {
  var pic = $('img');

  pic.removeAttr("width"); 
  pic.removeAttr("height");
  thiswidth = pic.width();
  thisheight = pic.height();

  // You need to specify the size of your background image here
  // (could be done automatically by some PHP code)
  var FullscreenrOptions = {
        width  : thiswidth,
        height : thisheight,
        bgID   : 'img'
      };

  // This will activate the full screen background!
  jQuery.fn.fullscreenr(FullscreenrOptions);
});
//]]>
</script>

So ... what changes did I manage?

Well, I managed to make it so that you don't have to specify a background image/file, it picks it up automatically from the body.

I also managed to make it so that it can detect the height/width by itself.

Further - I made it so that the wrapper and image to be resized is inserted via the JQuery, rather than it being included in the markup, and that it's styled via the JS as well.

Now ... the problems/desires?

Well - for starters - this is all in the main html doc.

I'd like it as an external file, but everything I tried failed! Likely due to the hackjob done on it.

Following that - is it possible to make it so we can specify the element it is to apply to (in case we want something other than body)?

Generally - it looks like a mess, (due to the mis-mash of the hackjob), and I'm pretty sure it's damned inefficient/untidy. Is there a better way to do the code?

I'm not 100% sure, but maybe the z-index property should be settable! as I suppose it's possible that at some point someone may have a different setup and desire a different value?

(Include a default in case none is specified?)

IE6 ... I think I've missed how to make the CSS work for IE6, is it possible to identify the browser and supply different styling if it's IE6?

All that aside, it seems to work well enough. Resizes on window resize, works in FF3/latest chrome (6?), IE7 etc.

I've seen a little trick for testi开发者_Python百科ng whether CSS3 is supported or not, so I'll also test to see if I can use it to detect if this is required or not (should save some bloat if not required).

+

I feel so cheeky asking for assistance...

I'm used to doing this sort of thing myself, but seems silly to waste a whole day doing something, when there are smarter/better people that can help spot the common issues and save me turning that day into a week of hair pulling :D

So in advance (if I'm lucky) Thank you.

For those who came here looking for a stable plugin to easily resize the background image of a web page, there is a good Jquery Plugin that does just that!

See: jQuery Easy Background Resize

Related to the OP questions:

• Support for older browsers:

The market share for IE6 is today very low. The same goes to other browsers like Safari, Firefox, and Opera.

See more details here!

• Wrap the code into a Jquery Plug-In:

Take your code and build a plug-in out of it can be done in four basic steps:

1. Cross Library Safety
2. Create and Name Your Plugin Function
3. Allow chainability
4. Start Building Plugin Functionality

(1) The first thing to do is create a wrapper function which allows you to use $ and not cause conflicts with other JavaScript frameworks that may be included:

(function($) {
  // safe to use $ here and not cause conflicts
})(jQuery);

(2) Next, create the function inside which your plugin will reside. Whatever you name this function will be how you and others use your plugin:

(function($) {
  $.fn.mypluginname = function() {
    // the plugin functionality goes in here
  }
})(jQuery);

(3) At this point, keep in mind that because jQuery takes any selector, you could be dealing with one or more objects. This means you need to be sure that your plug-in loops through each element matched by the selector and applies the plug-in functionality:

(function($) {
  $.fn.mypluginname = function() {
    return this.each(function() {
      // apply plugin functionality to each element
    });
  }
})(jQuery);

(4) At this stage, you start building your plugin functionality! In your case, all the necessary steps for the background resize.

The end Result will be something along this line:

$('div').mypluginname();

Here's a good tutorial to walk you through the entire process, even adding configuration options as you mentioned!

See: Creating A jQuery Plugin From Scratch