I tried researching but couldn't come up with a good jQuery Plugin that will allow me to insert a background image onto a div while being scalable. For example,

Lets say I have a 4 different divs like so:

<div id="one">

</div>

<div id="two">

</div>

<div id="three">

</div>

<div id="four">

</div>

Each #/id/div must have their own unique image and must resize or be scalable to the browser width and height. I want this to be compatible with IE7+. If Stack Overflow community can help that would be awesome.

I know i can use background-resize:100% on the div but will only work on modern browsers.

• jquery

This link could help you with changing the body background to a scalar image. Perhaps you could apply the same concept to the divs you've got?

Something I threw together to get you started. Set the size of the div before creating or add two additional paramers for width and height.

(function( $ ) {
  $.fn.bgImage = function( src ) {
    var d=this;
    var ht=d.html();
    var z=parseInt(d.css('z-index'));
    if(!z) z=0;  
    var oImg=document.createElement('img'); 
    oImg.src=src;
    oImg.style.width=d.width()+'px';
    oImg.style.height=d.height()+'px';
    oImg.style.position='absolute';
    oImg.style.zIndex=z;
    d.html('');
    d.append('<div id="a" style="position:absolute;z-index:'+(z+1)+';">'+ht+'</div>');
    d.append(oImg);
  };
})( jQuery );

$('#one').bgImage('http://www.google.com/intl/en_ALL/images/logos/images_logo_lg.gif');