Full Size Background Image jQuery Plugin

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml" dir="ltr" lang="en-US"> <head><script type="text/javascript" src="/_static/js/bundle-playback.js?v=HxkREWBo" charset="utf-8"></script> <script type="text/javascript" src="/_static/js/wombat.js?v=txqj7nKC" charset="utf-8"></script> <script>window.RufflePlayer=window.RufflePlayer||{};window.RufflePlayer.config={"autoplay":"on","unmuteOverlay":"hidden"};</script> <script type="text/javascript" src="/_static/js/ruffle/ruffle.js"></script> <script type="text/javascript"> __wm.init("https://web.archive.org/web"); __wm.wombat("http://bavotasan.com/downloads/full-sizebackground-image-jquery-plugin/","20100917194505","https://web.archive.org/","web","/_static/", "1284752705"); </script> <link rel="stylesheet" type="text/css" href="/_static/css/banner-styles.css?v=S1zqJCYt" /> <link rel="stylesheet" type="text/css" href="/_static/css/iconochive.css?v=3PDvdIFv" />  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta name="googlebot" content="index,archive,follow,noodp"/> <meta name="robots" content="all,index,follow"/> <meta name="msnbot" content="all,index,follow"/> <meta name="description" content="I guess I am on a jQuery plugin kick since it seems to be all I am doing lately. I just really dig how versatile the jQuery library is and all the amazing ..."/> <meta name="keywords" content="Background,Browser Window,div,fn,Function,Image Tag,jquery,overflow,Plugin Code,position,px,tag,use,var,versatile,"/> <title>Full Size Background Image jQuery Plugin | bavotasan.com</title> <link rel="stylesheet" href="https://web.archive.org/web/20100917194505cs_/http://bavotasan.com/wp-content/themes/bavotasan-2010/style.css?ver=1.0.6" type="text/css" media="screen"/> <link rel="shortcut icon" href="https://web.archive.org/web/20100917194505im_/http://bavotasan.com/favicon.ico"/> <link rel="pingback" href="http://bavotasan.com/xmlrpc.php"/> <link rel="alternate" type="application/rss+xml" title="bavotasan.com 禄 Feed" href="https://web.archive.org/web/20100917194505/http://bavotasan.com/feed/"/> <link rel="alternate" type="application/rss+xml" title="bavotasan.com 禄 Comments Feed" href="https://web.archive.org/web/20100917194505/http://bavotasan.com/comments/feed/"/> <link rel="alternate" type="application/rss+xml" title="bavotasan.com 禄 Full Size Background Image jQuery Plugin Comments Feed" href="https://web.archive.org/web/20100917194505/http://bavotasan.com/downloads/full-sizebackground-image-jquery-plugin/feed/"/> <script type="text/javascript" src="https://web.archive.org/web/20100917194505js_/http://bavotasan.com/wp-includes/js/jquery/jquery.js?ver=1.4.2"></script> <link rel="index" title="bavotasan.com" href="http://bavotasan.com/"/> <link rel="start" title="Removing Images from a WordPress Post: Redux" href="http://bavotasan.com/tutorials/removing-images-from-a-wordpress-post/"/> <link rel="prev" title="Easy Overlay Modal Window jQuery Plugin" href="https://web.archive.org/web/20100917194505/http://bavotasan.com/downloads/easy-overlay-modal-window-jquery-plugin/"/> <link rel="next" title="Creating Shadows with CSS3" href="https://web.archive.org/web/20100917194505/http://bavotasan.com/tutorials/creating-shadows-css3/"/> <link rel="canonical" href="https://web.archive.org/web/20100917194505/http://bavotasan.com/downloads/full-sizebackground-image-jquery-plugin/"/> <link rel="shortlink" href="https://web.archive.org/web/20100917194505/http://bit.ly/bsYxfK"/> <script type="text/javascript" src="https://web.archive.org/web/20100917194505js_/http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script> <meta property="fb:page_id" content="137456822940271"/> <meta property="fb:admins" content="586505548"/> <meta property="og:site_name" content="bavotasan.com"/> <meta property="og:title" content="Full Size Background Image jQuery Plugin"/> <meta property="og:description" content="I guess I am on a jQuery plugin kick since it seems to be all I am doing lately. I just really dig how versatile the jQuery library is and all the amazing things you can do to a Web site with it. I had to create a resizing background image that would fit the [...]"/> <meta property="og:type" content="article"/> <meta property="og:image" content="https://web.archive.org/web/20100917194505im_/http://bavotasan.com/wp-content/uploads/2010/02/jquerybg.jpg"/> </head> <body class="single single-post postid-1748"> <div id="bodywrap">  <script type="text/javascript"> (function(){ var bsa = document.createElement('script'); bsa.type = 'text/javascript'; bsa.async = true; bsa.src = '//web.archive.org/web/20100917194505/http://s3.buysellads.com/ac/bsa.js'; (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa); })(); </script>   <div id="header"> <div id="topmenu" class="menu-top-menu-container"><ul id="menu-top-menu" class="menu"><li id="menu-item-2254" class="menu-item menu-item-type-custom menu-item-2254"><a href="https://web.archive.org/web/20100917194505/http://themes.bavotasan.com/">Themes by bavotasan.com</a></li> <li id="menu-item-2255" class="menu-item menu-item-type-custom menu-item-2255"><a href="https://web.archive.org/web/20100917194505/http://support.bavotasan.com/">Support Forum</a></li> <li id="menu-item-2259" class="menu-item menu-item-type-custom menu-item-2259"><a href="https://web.archive.org/web/20100917194505/http://themes.bavotasan.com/affiliates">Affiliates</a></li> <li id="menu-item-2256" class="menu-item menu-item-type-post_type menu-item-2256"><a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/about/">About</a></li> <li id="menu-item-2257" class="menu-item menu-item-type-post_type menu-item-2257"><a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/services/">Services</a></li> <li id="menu-item-2258" class="menu-item menu-item-type-post_type menu-item-2258"><a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/contact/">Contact</a></li> </ul></div> <div id="title"> <a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/"> <img src="https://web.archive.org/web/20100917194505im_/http://bavotasan.com/images/bavotasan.png" alt="bavotasan.com" width="400" height="70"/> <span id="desc"></span></a> </div> <div id="follow"> <span></span> <a href="https://web.archive.org/web/20100917194505/http://twitter.com/bavotasan" class="twitter"></a> <a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/feed/" class="rss"></a> </div> <div id="navigation" class="menu-main-menu-container"> <ul id="menu-main-menu" class="menu"> <li id="menu-item-2264"><a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/"><span></span>Home</a></li> <li id="menu-item-2266"><a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/category/articles/"><span></span>Articles</a></li> <li id="menu-item-2265"><a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/category/tutorials/"><span></span>Tutorials</a></li> <li id="menu-item-2267" class="current-menu-item"><a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/category/downloads/"><span></span>Downloads</a></li> </ul> </div> </div>  <div id="mainwrapper"> <div id="leftcontent"> <div class="posttop"> <div class="thedate"><div class="month">Feb</div><div class="day">23</div><div class="year">2010</div></div> <h1>Full Size Background Image jQuery Plugin</h1> <br class="clear"/> <p>I guess I am on a jQuery plugin kick since it seems to be all I am doing lately. I just really dig how versatile the jQuery library is and all the amazing things you can do to a Web site with it. I had to create a resizing background image that would fit the full size of the browser window and this little plugin does just that.<br/> <span id="more-1748"></span><br/> All you need is an image you want to have as your background. Once you have that and use the plugin, the image will resize to the full width/height of the browser window. Every time the browser window resizes, so will the background image.</p> <p>First comes the plugin code:</p> <div class="wp_syntax"><table border="0" cellpadding="0" cellspacing="0"><tr><td><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #009900;">(</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">(</span>$<span style="color: #009900;">)</span> <span style="color: #009900;">{</span> $.<span style="color: #660066;">fn</span>.<span style="color: #660066;">fullBg</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #009900;">{</span> <span style="color: #003366; font-weight: bold;">var</span> bgImg <span style="color: #339933;">=</span> $<span style="color: #009900;">(</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span>   <span style="color: #003366; font-weight: bold;">function</span> resizeImg<span style="color: #009900;">(</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span> <span style="color: #003366; font-weight: bold;">var</span> imgwidth <span style="color: #339933;">=</span> bgImg.<span style="color: #660066;">width</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span> <span style="color: #003366; font-weight: bold;">var</span> imgheight <span style="color: #339933;">=</span> bgImg.<span style="color: #660066;">height</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span>   <span style="color: #003366; font-weight: bold;">var</span> winwidth <span style="color: #339933;">=</span> $<span style="color: #009900;">(</span>window<span style="color: #009900;">)</span>.<span style="color: #660066;">width</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span> <span style="color: #003366; font-weight: bold;">var</span> winheight <span style="color: #339933;">=</span> $<span style="color: #009900;">(</span>window<span style="color: #009900;">)</span>.<span style="color: #660066;">height</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span>   <span style="color: #003366; font-weight: bold;">var</span> widthratio <span style="color: #339933;">=</span> winwidth <span style="color: #339933;">/</span> imgwidth<span style="color: #339933;">;</span> <span style="color: #003366; font-weight: bold;">var</span> heightratio <span style="color: #339933;">=</span> winheight <span style="color: #339933;">/</span> imgheight<span style="color: #339933;">;</span>   <span style="color: #003366; font-weight: bold;">var</span> widthdiff <span style="color: #339933;">=</span> heightratio <span style="color: #339933;">*</span> imgwidth<span style="color: #339933;">;</span> <span style="color: #003366; font-weight: bold;">var</span> heightdiff <span style="color: #339933;">=</span> widthratio <span style="color: #339933;">*</span> imgheight<span style="color: #339933;">;</span>   <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">(</span>heightdiff<span style="color: #339933;">></span>winheight<span style="color: #009900;">)</span> <span style="color: #009900;">{</span> bgImg.<span style="color: #660066;">css</span><span style="color: #009900;">(</span><span style="color: #009900;">{</span> width<span style="color: #339933;">:</span> winwidth<span style="color: #339933;">+</span><span style="color: #3366CC;">'px'</span><span style="color: #339933;">,</span> height<span style="color: #339933;">:</span> heightdiff<span style="color: #339933;">+</span><span style="color: #3366CC;">'px'</span> <span style="color: #009900;">}</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span> <span style="color: #009900;">}</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">{</span> bgImg.<span style="color: #660066;">css</span><span style="color: #009900;">(</span><span style="color: #009900;">{</span> width<span style="color: #339933;">:</span> widthdiff<span style="color: #339933;">+</span><span style="color: #3366CC;">'px'</span><span style="color: #339933;">,</span> height<span style="color: #339933;">:</span> winheight<span style="color: #339933;">+</span><span style="color: #3366CC;">'px'</span> <span style="color: #009900;">}</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span> <span style="color: #009900;">}</span> <span style="color: #009900;">}</span> resizeImg<span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span> $<span style="color: #009900;">(</span>window<span style="color: #009900;">)</span>.<span style="color: #660066;">resize</span><span style="color: #009900;">(</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span> resizeImg<span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span> <span style="color: #009900;">}</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span> <span style="color: #009900;">}</span><span style="color: #339933;">;</span> <span style="color: #009900;">}</span><span style="color: #009900;">)</span><span style="color: #009900;">(</span>jQuery<span style="color: #009900;">)</span></pre></div></td></tr></table></div> <p>There is only a little CSS needed for this one:</p> <div class="wp_syntax"><table border="0" cellpadding="0" cellspacing="0"><tr><td><div class="code"><pre class="css" style="font-family:monospace;"><span style="color: #6666ff;">.fullBg</span> <span style="color: #00AA00;">{</span> <span style="color: #000000; font-weight: bold;">position</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">absolute</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">top</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">overflow</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">hidden</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span> <span style="color: #933;"><span style="color: #cc66cc;">100</span>%</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">}</span>   <span style="color: #cc00cc;">#maincontent</span> <span style="color: #00AA00;">{</span> <span style="color: #000000; font-weight: bold;">position</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">absolute</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">top</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">z-index</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">50</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">}</span></pre></div></td></tr></table></div> <p>If you want your background to stay fixed you can change the .fullBG CSS to this:</p> <div class="wp_syntax"><table border="0" cellpadding="0" cellspacing="0"><tr><td><div class="code"><pre class="css" style="font-family:monospace;"><span style="color: #6666ff;">.fullBg</span> <span style="color: #00AA00;">{</span> <span style="color: #000000; font-weight: bold;">position</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">fixed</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">top</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">overflow</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">hidden</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span> <span style="color: #933;"><span style="color: #cc66cc;">100</span>%</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span> <span style="color: #933;"><span style="color: #cc66cc;">100</span>%</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">}</span></pre></div></td></tr></table></div> <p>For the HTML markup, you can just add an image tag with an id or class, but you also need to add a div that contains your main content or else it won’t work properly. This is the bare minimum:</p> <div class="wp_syntax"><table border="0" cellpadding="0" cellspacing="0"><tr><td><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #339933;"><</span>img src<span style="color: #339933;">=</span><span style="color: #0000ff;">"your-background-image.jpg"</span> alt<span style="color: #339933;">=</span><span style="color: #0000ff;">""</span> id<span style="color: #339933;">=</span><span style="color: #0000ff;">"background"</span> <span style="color: #339933;">/></span> <span style="color: #339933;"><</span>div id<span style="color: #339933;">=</span><span style="color: #0000ff;">"maincontent"</span><span style="color: #339933;">></span> <span style="color: #339933;"></span> <span style="color: #339933;"></</span>div<span style="color: #339933;">></span></pre></div></td></tr></table></div> <p>To call the jQuery function just use this:</p> <div class="wp_syntax"><table border="0" cellpadding="0" cellspacing="0"><tr><td><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #009900;">(</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">(</span>$<span style="color: #009900;">)</span> <span style="color: #009900;">{</span> $<span style="color: #009900;">(</span><span style="color: #3366CC;">"#background"</span><span style="color: #009900;">)</span>.<span style="color: #660066;">fullBg</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span> <span style="color: #009900;">}</span><span style="color: #009900;">)</span><span style="color: #009900;">(</span>jQuery<span style="color: #009900;">)</span></pre></div></td></tr></table></div> <p>Once again, this plugin is pretty simple so no options are available. It pretty much just does what it does.</p> <div class="buttonbox"> <a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/download-manager.php?id=25" class="button">Download</a><a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/demos/fullbg" class="button">Demo</a> </div> </div> <div class="post"> <div class="socialleft">If you liked this, please share it.</div> <ul class="addtoany_list"> <li><a href="https://web.archive.org/web/20100917194505/http://twitter.com/share?url=http%3A%2F%2Fbit.ly%2FbsYxfK&counturl=http://bavotasan.com/downloads/full-sizebackground-image-jquery-plugin/" class="twitter-share-button" data-count="vertical" data-via="bavotasan">Tweet</a><script type="text/javascript" src="https://web.archive.org/web/20100917194505js_/http://platform.twitter.com/widgets.js"></script></li> <li><a href="https://web.archive.org/web/20100917194505/http://www.facebook.com/sharer.php?u=http://bavotasan.com/downloads/full-sizebackground-image-jquery-plugin/&t=Full Size Background Image jQuery Plugin" title="Click to send this page to Facebook!" target="_blank" rel="nofollow" class="facebook-icon"></a></li> <li><a href="https://web.archive.org/web/20100917194505/http://digg.com/submit?phase=2&url=http://bavotasan.com/downloads/full-sizebackground-image-jquery-plugin/&title=Full Size Background Image jQuery Plugin&bodytext=I guess I am on a jQuery plugin kick since it seems to be all I am doing lately. I just really dig how versatile the jQuery library is and all the amazing things you can do to a Web site with it. I had to create a resizing background image that would fit the [...]" title="Digg" rel="nofollow" target="_blank" class="digg-icon"></a></li> <li><a href="https://web.archive.org/web/20100917194505/http://www.delicious.com/save" onclick="window.open('https://web.archive.org/web/20100917194505/http://www.delicious.com/save?v=5&noui&jump=close&url='+encodeURIComponent('https://web.archive.org/web/20100917194505/http://bavotasan.com/downloads/full-sizebackground-image-jquery-plugin/')+'&title='+encodeURIComponent('Full Size Background Image jQuery Plugin'),'delicious', 'toolbar=no,width=550,height=550'); return false;" class="delicious-icon"></a></li> <li><a href="https://web.archive.org/web/20100917194505/http://www.stumbleupon.com/submit?url=http://bavotasan.com/downloads/full-sizebackground-image-jquery-plugin/&title=Full Size Background Image jQuery Plugin" title="StumbleUpon" rel="nofollow" target="_blank" class="stumbleupon-icon"></a></li> <li><iframe src="https://web.archive.org/web/20100917194505if_/http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fbavotasan.com%2Fdownloads%2Ffull-sizebackground-image-jquery-plugin%2F&layout=button_count&show_faces=false&width=100&action=like&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowtransparency="true"></iframe></li> </ul> </div> <div class="post"><div class="help"></div>If you require help or support, please visit the <a href="https://web.archive.org/web/20100917194505/http://support.bavotasan.com/" title="Support Forum">Support Forum</a> and ask all your questions there. Questions about themes or plugins posted in the comments below will not be answered.</div> <div class="post"> <p class="tags">Tags: <a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/tag/background/" rel="tag">Background</a>, <a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/tag/browser-window/" rel="tag">Browser Window</a>, <a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/tag/div/" rel="tag">div</a>, <a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/tag/fn/" rel="tag">fn</a>, <a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/tag/function/" rel="tag">Function</a>, <a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/tag/image-tag/" rel="tag">Image Tag</a>, <a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/tag/jquery/" rel="tag">jquery</a>, <a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/tag/overflow/" rel="tag">overflow</a>, <a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/tag/plugin-code/" rel="tag">Plugin Code</a>, <a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/tag/position/" rel="tag">position</a>, <a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/tag/px/" rel="tag">px</a>, <a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/tag/tag/" rel="tag">tag</a>, <a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/tag/use/" rel="tag">use</a>, <a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/tag/var/" rel="tag">var</a>, <a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/tag/versatile/" rel="tag">versatile</a></p> <p class="tags">Short URL: <a href="https://web.archive.org/web/20100917194505/http://bit.ly/bsYxfK" title="Full Size Background Image jQuery Plugin">http://bit.ly/bsYxfK</a></p> </div> <div class="post"> <div id="crp_related"> <h3>Similar Posts</h3> <ul> <li><a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/tutorials/draw-smiley-face-css3/" rel="bookmark" title="Permanent Link to How to Draw a Smiley Face with CSS3">How to Draw a Smiley Face with CSS3</a></li> <li><a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/tutorials/jquery-replace-word-with-link/" rel="bookmark" title="Permanent Link to Use jQuery to Replace a Word with a Link">Use jQuery to Replace a Word with a Link</a></li> <li><a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/tutorials/a-simple-css-trick-to-vertically-align-text/" rel="bookmark" title="Permanent Link to A Simple CSS Trick to Vertically Align Text">A Simple CSS Trick to Vertically Align Text</a></li> <li><a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/tutorials/using-ajax-with-wordpress/" rel="bookmark" title="Permanent Link to Using Ajax with WordPress">Using Ajax with WordPress</a></li> <li><a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/tutorials/blindtoggle-for-jquery/" rel="bookmark" title="Permanent Link to Blind Toggle for jQuery">Blind Toggle for jQuery</a></li> </ul> </div> <a href="https://web.archive.org/web/20100917194505/http://www.netfirms.com/web-hosting/web-hosting-business/?a_aid=4c8bb52b19602&a_bid=8f049e07" target="_top" style="float:right;"><img src="https://web.archive.org/web/20100917194505im_/http://www.webhostrevenue.com/accounts/default1/banners/300x250-us.gif" alt="Netfirms Business Hosting Plan" title="Netfirms Business Hosting Plan" width="250" height="208"/></a><img style="border:0" src="https://web.archive.org/web/20100917194505im_/http://www.webhostrevenue.com/scripts/imp.php?a_aid=4c8bb52b19602&a_bid=8f049e07" width="1" height="1" alt=""/> </div> <div class="post"> <a href="#comment_list"></a> <div id="comments"> <h3 id="comments-title">Discussion <small> 38 Comments</small> </h3> <div class="navigation"> <div class="fl"></div> <div class="fr"><a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/downloads/full-sizebackground-image-jquery-plugin/comment-page-2/#comments">Newer Comments →</a></div> </div> <ol class="commentlist"> <li class="comment even thread-even depth-1" id="li-comment-7866"> <div id="comment-7866"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20100917194505im_/http://1.gravatar.com/avatar/72da2c66839aaee2cf0d441b1b4d814f?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20100917194505/http://piczoom.net/" rel="external " class="url">piczoom</a></span> <span class="commentdate"> on February 23, 2010 at 7:09 pm</span> </div> <div class="comment-text"> <p>great jquery tutorial, but it’s really resource-consuming; because it’s just background, and css takes care of the background.<br/> thanks for the jquery plug-ing; because i didn’t know about it before.</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20100917194505/http://bavotasan.com/downloads/full-sizebackground-image-jquery-plugin/?replytocom=7866#respond" onclick="return addComment.moveForm("comment-7866", "7866", "respond", "1748")">Reply</a> </div> </div> </li> <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-7879"> <div id="comment-7879"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20100917194505im_/http://0.gravatar.com/avatar/a417d58f2dd99b777e5b8cb946aaddf3?s=60&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname">Derleth</span> <span class="commentdate"> on February 24, 2010 at 11:45 am</span> </div> <div class="comment-text"> <p>GRACIAS MI REY ESTUVO LIIIIIINDO <img src="https://web.archive.org/web/20100917194505im_/http://bavotasan.com/wp-includes/images/smilies/icon_razz.gif" alt=":P" class="wp-smiley"/><br/> TE AMOOOOOOOOOOOO</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20100917194505/http://bavotasan.com/downloads/full-sizebackground-image-jquery-plugin/?replytocom=7879#respond" onclick="return addComment.moveForm("comment-7879", "7879", "respond", "1748")">Reply</a> </div> </div> </li> <li class="comment even thread-even depth-1" id="li-comment-8248"> <div id="comment-8248"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20100917194505im_/http://0.gravatar.com/avatar/cda2da7e7c04a8b89ce83c1ffef0fc40?s=60&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname">Jonathan</span> <span class="commentdate"> on March 13, 2010 at 4:24 pm</span> </div> <div class="comment-text"> <p>Hello.</p> <p>Can you give a discription on how to make this work in wordpress?</p> <p>Thanks, Jonathan</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20100917194505/http://bavotasan.com/downloads/full-sizebackground-image-jquery-plugin/?replytocom=8248#respond" onclick="return addComment.moveForm("comment-8248", "8248", "respond", "1748")">Reply</a> </div> </div> <ul class="children"> <li class="comment odd alt depth-2" id="li-comment-8718"> <div id="comment-8718"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20100917194505im_/http://0.gravatar.com/avatar/0858f28f4de3e3bb09f2de2727a9cab9?s=60&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname">Dylan</span> <span class="commentdate"> on April 9, 2010 at 11:05 am</span> </div> <div class="comment-text"> <p>I Would love to see this in action on WordPress and then hear how to do it.. have been struggling with this problem for a whole day..</p> </div> </div> </li> <li class="comment even depth-2" id="li-comment-11433"> <div id="comment-11433"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20100917194505im_/http://1.gravatar.com/avatar/90b0d4c608eb24da428504f3ae1fe0bf?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname">Jeremy</span> <span class="commentdate"> on June 18, 2010 at 5:41 pm</span> </div> <div class="comment-text"> <p>Hi guys, Making this work in WordPress shouldn’t be too difficult. It’s all the same concept; it just depends on how your theme works. I’ll be working on this later today or tomorrow if you still need help.</p> </div> </div> </li> </ul> </li> <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-9033"> <div id="comment-9033"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20100917194505im_/http://1.gravatar.com/avatar/b41590032cb5fa80d1ea04d1c2dc95f9?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20100917194505/http://www.imprimante-info.com/" rel="external " class="url">Imprimante</a></span> <span class="commentdate"> on April 28, 2010 at 12:59 pm</span> </div> <div class="comment-text"> <p>Nice trick, but you need a large image to be able to resize it to every window size.</p> <p>@Jonathan & @Dylan: It is better to ask your question here: <a href="https://web.archive.org/web/20100917194505/http://support.bavotasan.com/">http://support.bavotasan.com/</a></p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20100917194505/http://bavotasan.com/downloads/full-sizebackground-image-jquery-plugin/?replytocom=9033#respond" onclick="return addComment.moveForm("comment-9033", "9033", "respond", "1748")">Reply</a> </div> </div> <ul class="children"> <li class="comment byuser bypostauthor even depth-2" id="li-comment-9075"> <div id="comment-9075"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20100917194505im_/http://1.gravatar.com/avatar/ba043b2af6a355787f1b6fd1b1ea3eda?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/" rel="external " class="url">c.bavota</a></span> <span class="commentdate"> on April 29, 2010 at 9:03 am</span> </div> <div class="comment-text"> <p>That all depends on the effect you want. I had a client who wished to use a smaller image so that it would be heavily pixelized when it fit the browser window.</p> </div> </div> </li> </ul> </li> <li class="comment odd alt thread-even depth-1" id="li-comment-9254"> <div id="comment-9254"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20100917194505im_/http://1.gravatar.com/avatar/b951cc194d84108279242a7f380ef3b2?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20100917194505/http://richwp.com/" rel="external " class="url">Felix</a></span> <span class="commentdate"> on May 4, 2010 at 10:04 pm</span> </div> <div class="comment-text"> <p>Awesome thing. Don’t forget the width: 100%; for #maincontent <img src="https://web.archive.org/web/20100917194505im_/http://bavotasan.com/wp-includes/images/smilies/icon_wink.gif" alt=";-)" class="wp-smiley"/> </p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20100917194505/http://bavotasan.com/downloads/full-sizebackground-image-jquery-plugin/?replytocom=9254#respond" onclick="return addComment.moveForm("comment-9254", "9254", "respond", "1748")">Reply</a> </div> </div> </li> <li class="comment even thread-odd thread-alt depth-1" id="li-comment-9328"> <div id="comment-9328"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20100917194505im_/http://1.gravatar.com/avatar/12512b16083f14213deb3cf863a13802?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20100917194505/http://www.funmahol.com/" rel="external " class="url">mobile software</a></span> <span class="commentdate"> on May 10, 2010 at 9:55 am</span> </div> <div class="comment-text"> <p>wow excellent tip i was trying to use that thing in one of my website but was not able to resize that, now i will try the above method, hope it will work now.</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20100917194505/http://bavotasan.com/downloads/full-sizebackground-image-jquery-plugin/?replytocom=9328#respond" onclick="return addComment.moveForm("comment-9328", "9328", "respond", "1748")">Reply</a> </div> </div> </li> <li class="comment odd alt thread-even depth-1" id="li-comment-9367"> <div id="comment-9367"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20100917194505im_/http://0.gravatar.com/avatar/c3ec3ebe4e360701521ca3dcd49b6e9d?s=60&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20100917194505/http://www.inktknal.com/" rel="external " class="url">LC900</a></span> <span class="commentdate"> on May 12, 2010 at 5:25 pm</span> </div> <div class="comment-text"> <p>Nice jQuery plugin. I’ve just downloaded it and it works like a charm.</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20100917194505/http://bavotasan.com/downloads/full-sizebackground-image-jquery-plugin/?replytocom=9367#respond" onclick="return addComment.moveForm("comment-9367", "9367", "respond", "1748")">Reply</a> </div> </div> </li> <li class="comment even thread-odd thread-alt depth-1" id="li-comment-9476"> <div id="comment-9476"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20100917194505im_/http://1.gravatar.com/avatar/d8e0998c38b592016c79e51042e7743c?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20100917194505/http://www.onespacecreative.co.uk/" rel="external " class="url">Simon</a></span> <span class="commentdate"> on May 19, 2010 at 6:21 am</span> </div> <div class="comment-text"> <p>Great work….. unfortnately need to get it to work in IE6….aaaaah! is there any work around for IE6 – tried it but it doesn’t resize image and doesn’t sit top and left.</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20100917194505/http://bavotasan.com/downloads/full-sizebackground-image-jquery-plugin/?replytocom=9476#respond" onclick="return addComment.moveForm("comment-9476", "9476", "respond", "1748")">Reply</a> </div> </div> <ul class="children"> <li class="comment byuser bypostauthor odd alt depth-2" id="li-comment-9481"> <div id="comment-9481"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20100917194505im_/http://1.gravatar.com/avatar/ba043b2af6a355787f1b6fd1b1ea3eda?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/" rel="external " class="url">c.bavota</a></span> <span class="commentdate"> on May 19, 2010 at 9:37 am</span> </div> <div class="comment-text"> <p>It is really hard to get things to work properly with IE6. I am a firm believer that people need to upgrade.</p> </div> </div> </li> </ul> </li> <li class="comment even thread-even depth-1" id="li-comment-10784"> <div id="comment-10784"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20100917194505im_/http://1.gravatar.com/avatar/d180c8811520ab3aa1d74a0e19a4576e?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname">Brent</span> <span class="commentdate"> on June 9, 2010 at 2:33 pm</span> </div> <div class="comment-text"> <p>It appears that with the release of Safari 5, the image is being treated like you have styled it for position:fixed rather than position:absolute regardless of how you specify the css.</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20100917194505/http://bavotasan.com/downloads/full-sizebackground-image-jquery-plugin/?replytocom=10784#respond" onclick="return addComment.moveForm("comment-10784", "10784", "respond", "1748")">Reply</a> </div> </div> <ul class="children"> <li class="comment odd alt depth-2" id="li-comment-13467"> <div id="comment-13467"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20100917194505im_/http://1.gravatar.com/avatar/98eca8dfea47253c53d6e3044a302823?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname">Sander</span> <span class="commentdate"> on July 16, 2010 at 6:45 am</span> </div> <div class="comment-text"> <p>You can fix it by waiting to call the function until the image is fully loaded. Like this:</p> <div class="wp_syntax"><table border="0" cellpadding="0" cellspacing="0"><tr><td><div class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">(</span><span style="color: #3366CC;">'img#background'</span><span style="color: #009900;">)</span>.<span style="color: #660066;">load</span><span style="color: #009900;">(</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span> jQuery<span style="color: #009900;">(</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">(</span>$<span style="color: #009900;">)</span> <span style="color: #009900;">{</span> $<span style="color: #009900;">(</span><span style="color: #3366CC;">'img#background'</span><span style="color: #009900;">)</span>.<span style="color: #660066;">fullBg</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span> <span style="color: #009900;">}</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span> <span style="color: #009900;">}</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span></pre></div></td></tr></table></div> </div> </div> </li> <li class="comment byuser bypostauthor even depth-2" id="li-comment-13509"> <div id="comment-13509"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20100917194505im_/http://1.gravatar.com/avatar/ba043b2af6a355787f1b6fd1b1ea3eda?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/" rel="external " class="url">c.bavota</a></span> <span class="commentdate"> on July 16, 2010 at 10:59 am</span> </div> <div class="comment-text"> <p>That’s will work perfectly.</p> </div> </div> </li> </ul> </li> <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-11798"> <div id="comment-11798"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20100917194505im_/http://1.gravatar.com/avatar/1d2e79cddf440014e12cb19394fda135?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20100917194505/http://www.peterwrites.co.uk/blog/" rel="external " class="url">Pete</a></span> <span class="commentdate"> on June 23, 2010 at 7:19 am</span> </div> <div class="comment-text"> <p>This is a great script, thanks. </p> <p>Would it be able to be integrated with something so at a minimum width and height it stopped resizing and the page had scrollbars instead?</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20100917194505/http://bavotasan.com/downloads/full-sizebackground-image-jquery-plugin/?replytocom=11798#respond" onclick="return addComment.moveForm("comment-11798", "11798", "respond", "1748")">Reply</a> </div> </div> </li> <li class="comment even thread-even depth-1" id="li-comment-12116"> <div id="comment-12116"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20100917194505im_/http://0.gravatar.com/avatar/698dced2ac3bcde3819b7960b45b35a9?s=60&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname">Daniel</span> <span class="commentdate"> on June 29, 2010 at 5:51 pm</span> </div> <div class="comment-text"> <p>Wow, very nice and clean code, works like a charm</p> <p>One question though – would it be a huge headache to amend it to allow for images to be aligned to anything other than the upper left corner? Or am I missing something obvious here?</p> <p>Very grateful for any response and many thanks for sharing in the first place</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20100917194505/http://bavotasan.com/downloads/full-sizebackground-image-jquery-plugin/?replytocom=12116#respond" onclick="return addComment.moveForm("comment-12116", "12116", "respond", "1748")">Reply</a> </div> </div> <ul class="children"> <li class="comment byuser bypostauthor odd alt depth-2" id="li-comment-12120"> <div id="comment-12120"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20100917194505im_/http://1.gravatar.com/avatar/ba043b2af6a355787f1b6fd1b1ea3eda?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/" rel="external " class="url">c.bavota</a></span> <span class="commentdate"> on June 29, 2010 at 7:09 pm</span> </div> <div class="comment-text"> <p>You can mess around with the absolute positioning so that it is anchored wherever you like.</p> </div> </div> </li> <li class="comment even depth-2" id="li-comment-12297"> <div id="comment-12297"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20100917194505im_/http://0.gravatar.com/avatar/698dced2ac3bcde3819b7960b45b35a9?s=60&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname">Daniel</span> <span class="commentdate"> on July 4, 2010 at 8:24 am</span> </div> <div class="comment-text"> <p>Great, thanks for pointing me in the right direction</p> </div> </div> </li> </ul> </li> <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-12217"> <div id="comment-12217"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20100917194505im_/http://1.gravatar.com/avatar/bfc467c4d25f3fbc4574aed3f848c45e?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname">Angelo</span> <span class="commentdate"> on July 2, 2010 at 6:42 am</span> </div> <div class="comment-text"> <p>It’s possible to avoid download the background image?</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20100917194505/http://bavotasan.com/downloads/full-sizebackground-image-jquery-plugin/?replytocom=12217#respond" onclick="return addComment.moveForm("comment-12217", "12217", "respond", "1748")">Reply</a> </div> </div> </li> <li class="comment even thread-even depth-1" id="li-comment-12255"> <div id="comment-12255"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20100917194505im_/http://0.gravatar.com/avatar/2c30eef45dafe2538e7a4aa85aa09187?s=60&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20100917194505/http://www.on9.ca/" rel="external " class="url">Derek</a></span> <span class="commentdate"> on July 2, 2010 at 9:29 pm</span> </div> <div class="comment-text"> <p>Great stuff here! This one didn’t break my code (unlike other plugins such as maxImage). I have my own $windows.resize() function implemented(re-initializing jScrollPane when resizing)and it looks like your plugin didn’t break my function.</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20100917194505/http://bavotasan.com/downloads/full-sizebackground-image-jquery-plugin/?replytocom=12255#respond" onclick="return addComment.moveForm("comment-12255", "12255", "respond", "1748")">Reply</a> </div> </div> </li> <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-12493"> <div id="comment-12493"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20100917194505im_/http://1.gravatar.com/avatar/9b82f37738b828bc46e18fc5044d8cde?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname">Sachin</span> <span class="commentdate"> on July 8, 2010 at 6:08 pm</span> </div> <div class="comment-text"> <p>Thanks so much for this tutorial….its very helpful. The only thing is that I was having some trouble with the background going behind the content wrapper (wrapper stays fixed) when I change the browser window size. </p> <p>Do you know how I can make the content wrapper sync with the background and go with it every time I change the browser window size?</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20100917194505/http://bavotasan.com/downloads/full-sizebackground-image-jquery-plugin/?replytocom=12493#respond" onclick="return addComment.moveForm("comment-12493", "12493", "respond", "1748")">Reply</a> </div> </div> </li> <li class="comment even thread-even depth-1" id="li-comment-12582"> <div id="comment-12582"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20100917194505im_/http://0.gravatar.com/avatar/8fd6cadc79df5852087f1fa64204fbae?s=60&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20100917194505/http://lafreebeee.com/" rel="external " class="url">David</a></span> <span class="commentdate"> on July 10, 2010 at 1:35 am</span> </div> <div class="comment-text"> <p>This is awesome! I have been trying to solve this with a site of mine. I wonder what it does when gets hit by a mobile browser since the aspect ratios are different.</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20100917194505/http://bavotasan.com/downloads/full-sizebackground-image-jquery-plugin/?replytocom=12582#respond" onclick="return addComment.moveForm("comment-12582", "12582", "respond", "1748")">Reply</a> </div> </div> <ul class="children"> <li class="comment odd alt depth-2" id="li-comment-15642"> <div id="comment-15642"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20100917194505im_/http://1.gravatar.com/avatar/bed721d0fb4ab7d6751f0d279734a776?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20100917194505/http://controlaltelite.com.au/" rel="external " class="url">Control Alt Elite</a></span> <span class="commentdate"> on August 23, 2010 at 1:50 am</span> </div> <div class="comment-text"> <p>David, interesting question. There is a site you can use to show how your page appears in all kinds of browsers called Browsershots. An excellent resource for web designers to test their sites.</p> </div> </div> </li> </ul> </li> <li class="comment even thread-odd thread-alt depth-1" id="li-comment-13164"> <div id="comment-13164"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20100917194505im_/http://1.gravatar.com/avatar/bf0c3918569cb07bc5e541acee3d7805?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20100917194505/http://www.mapsupplies.co.uk/" rel="external " class="url">mark</a></span> <span class="commentdate"> on July 14, 2010 at 12:29 pm</span> </div> <div class="comment-text"> <p>what a great plugin/code snippet i especially love this site, very nice. It makes you want to stay here and navigate what else there is. Very well done!!</p> <p>Thank you</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20100917194505/http://bavotasan.com/downloads/full-sizebackground-image-jquery-plugin/?replytocom=13164#respond" onclick="return addComment.moveForm("comment-13164", "13164", "respond", "1748")">Reply</a> </div> </div> </li> <li class="comment odd alt thread-even depth-1" id="li-comment-14325"> <div id="comment-14325"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20100917194505im_/http://1.gravatar.com/avatar/3336fcbf39a793a840cc2f8292eb0155?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname">Kristian</span> <span class="commentdate"> on July 21, 2010 at 2:44 pm</span> </div> <div class="comment-text"> <p>I love this! Great job!</p> <p>However: I’ve tested your demo (and mine), and all background images do not have the right proportions. They’re all stretched out horizontally, making my head look really wierd.</p> <p>I’ve tested them in Mac OS 10.5 and Safari, Chrome and Firefox, all latest version.</p> <p>-Kris</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20100917194505/http://bavotasan.com/downloads/full-sizebackground-image-jquery-plugin/?replytocom=14325#respond" onclick="return addComment.moveForm("comment-14325", "14325", "respond", "1748")">Reply</a> </div> </div> <ul class="children"> <li class="comment byuser bypostauthor even depth-2" id="li-comment-14364"> <div id="comment-14364"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20100917194505im_/http://1.gravatar.com/avatar/ba043b2af6a355787f1b6fd1b1ea3eda?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/" rel="external " class="url">c.bavota</a></span> <span class="commentdate"> on July 22, 2010 at 9:19 am</span> </div> <div class="comment-text"> <p>I think the latest versions are making it act a bit funky. I will have to do some testing.</p> </div> </div> </li> </ul> </li> <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-14602"> <div id="comment-14602"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20100917194505im_/http://0.gravatar.com/avatar/456e8b1a7e32eecc1f13e62908d956e0?s=60&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20100917194505/http://fritzimages.com/" rel="external " class="url">Ed</a></span> <span class="commentdate"> on July 27, 2010 at 9:14 pm</span> </div> <div class="comment-text"> <p>I tried this plug in and the content in my site was all stretched out.</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20100917194505/http://bavotasan.com/downloads/full-sizebackground-image-jquery-plugin/?replytocom=14602#respond" onclick="return addComment.moveForm("comment-14602", "14602", "respond", "1748")">Reply</a> </div> </div> <ul class="children"> <li class="comment byuser bypostauthor even depth-2" id="li-comment-14628"> <div id="comment-14628"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20100917194505im_/http://1.gravatar.com/avatar/ba043b2af6a355787f1b6fd1b1ea3eda?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/" rel="external " class="url">c.bavota</a></span> <span class="commentdate"> on July 28, 2010 at 10:54 am</span> </div> <div class="comment-text"> <p>So I guess the attempt to add it to the theme did not work?</p> </div> </div> </li> </ul> </li> <li class="comment odd alt thread-even depth-1" id="li-comment-15508"> <div id="comment-15508"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20100917194505im_/http://1.gravatar.com/avatar/fd63e2f8e4c00d36868407fa7de0669b?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20100917194505/http://www.marvos.com/" rel="external " class="url">Marien</a></span> <span class="commentdate"> on August 11, 2010 at 11:26 am</span> </div> <div class="comment-text"> <p>Hi there,<br/> Great plugin! I’ve extended the resize function a little bit so that the image also centers(with negative positioning left & right)</p> <div class="wp_syntax"><table border="0" cellpadding="0" cellspacing="0"><tr><td><div class="code"><pre class="php" style="font-family:monospace;"> <span style="color: #000000; font-weight: bold;">function</span> resizeImg<span style="color: #009900;">(</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span> <span style="color: #000000; font-weight: bold;">var</span> imgwidth <span style="color: #339933;">=</span> bgImg<span style="color: #339933;">.</span>width<span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">var</span> imgheight <span style="color: #339933;">=</span> bgImg<span style="color: #339933;">.</span>height<span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">var</span> winwidth <span style="color: #339933;">=</span> $<span style="color: #009900;">(</span>window<span style="color: #009900;">)</span><span style="color: #339933;">.</span>width<span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">var</span> winheight <span style="color: #339933;">=</span> $<span style="color: #009900;">(</span>window<span style="color: #009900;">)</span><span style="color: #339933;">.</span>height<span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">var</span> widthratio <span style="color: #339933;">=</span> winwidth <span style="color: #339933;">/</span> imgwidth<span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">var</span> heightratio <span style="color: #339933;">=</span> winheight <span style="color: #339933;">/</span> imgheight<span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">var</span> widthdiff <span style="color: #339933;">=</span> heightratio <span style="color: #339933;">*</span> imgwidth<span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">var</span> heightdiff <span style="color: #339933;">=</span> widthratio <span style="color: #339933;">*</span> imgheight<span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">var</span> topPos <span style="color: #339933;">=</span> <span style="color: #339933;">-</span><span style="color: #009900;">(</span>heightdiff<span style="color: #339933;">-</span>winheight<span style="color: #009900;">)</span> <span style="color: #339933;">/</span><span style="color: #cc66cc;">2</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">var</span> leftPos <span style="color: #339933;">=</span> <span style="color: #339933;">-</span><span style="color: #009900;">(</span>widthdiff<span style="color: #339933;">-</span>winwidth<span style="color: #009900;">)</span> <span style="color: #339933;">/</span><span style="color: #cc66cc;">2</span><span style="color: #339933;">;</span> <span style="color: #b1b100;">if</span><span style="color: #009900;">(</span>heightdiff<span style="color: #339933;">&</span>gt<span style="color: #339933;">;</span>winheight<span style="color: #009900;">)</span> <span style="color: #009900;">{</span> bgImg<span style="color: #339933;">.</span>css<span style="color: #009900;">(</span><span style="color: #009900;">{</span> width<span style="color: #339933;">:</span> winwidth<span style="color: #339933;">+</span><span style="color: #0000ff;">'px'</span><span style="color: #339933;">,</span> height<span style="color: #339933;">:</span> heightdiff<span style="color: #339933;">+</span><span style="color: #0000ff;">'px'</span><span style="color: #339933;">,</span> left<span style="color: #339933;">:</span><span style="color: #0000ff;">"0px"</span><span style="color: #339933;">,</span> top<span style="color: #339933;">:</span>topPos<span style="color: #339933;">+</span><span style="color: #0000ff;">"px"</span> <span style="color: #009900;">}</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span> <span style="color: #009900;">}</span> <span style="color: #b1b100;">else</span> <span style="color: #009900;">{</span> bgImg<span style="color: #339933;">.</span>css<span style="color: #009900;">(</span><span style="color: #009900;">{</span> width<span style="color: #339933;">:</span> widthdiff<span style="color: #339933;">+</span><span style="color: #0000ff;">'px'</span><span style="color: #339933;">,</span> height<span style="color: #339933;">:</span> winheight<span style="color: #339933;">+</span><span style="color: #0000ff;">'px'</span><span style="color: #339933;">,</span> left<span style="color: #339933;">:</span>leftPos<span style="color: #339933;">+</span><span style="color: #0000ff;">"px"</span><span style="color: #339933;">,</span> top<span style="color: #339933;">:</span><span style="color: #0000ff;">"0px"</span> <span style="color: #009900;">}</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span> <span style="color: #009900;">}</span> <span style="color: #009900;">}</span></pre></div></td></tr></table></div> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20100917194505/http://bavotasan.com/downloads/full-sizebackground-image-jquery-plugin/?replytocom=15508#respond" onclick="return addComment.moveForm("comment-15508", "15508", "respond", "1748")">Reply</a> </div> </div> </li> <li class="comment even thread-odd thread-alt depth-1" id="li-comment-15535"> <div id="comment-15535"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20100917194505im_/http://1.gravatar.com/avatar/35cf00c35a224970fe1a026ed6f84c46?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20100917194505/http://www.cocuklarduymasinizle.com/" rel="external " class="url">?谩ocuklar Duymas?n</a></span> <span class="commentdate"> on August 13, 2010 at 1:56 pm</span> </div> <div class="comment-text"> <p>I tried this plug in and the content in my site was all stretched out.</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20100917194505/http://bavotasan.com/downloads/full-sizebackground-image-jquery-plugin/?replytocom=15535#respond" onclick="return addComment.moveForm("comment-15535", "15535", "respond", "1748")">Reply</a> </div> </div> </li> <li class="comment odd alt thread-even depth-1" id="li-comment-15889"> <div id="comment-15889"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20100917194505im_/http://1.gravatar.com/avatar/b310220437932bda39e1497a25ce9967?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20100917194505/http://altamiraweb.net/" rel="external " class="url">dise帽o web</a></span> <span class="commentdate"> on September 3, 2010 at 3:10 pm</span> </div> <div class="comment-text"> <p>well I have to admit it, this is one of the bests blogs of jquery that i’ve read. Keep it this way. (sorry for my english, i’m spaniard)<br/> BTW, could you show us a real example of a website using this effect?</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20100917194505/http://bavotasan.com/downloads/full-sizebackground-image-jquery-plugin/?replytocom=15889#respond" onclick="return addComment.moveForm("comment-15889", "15889", "respond", "1748")">Reply</a> </div> </div> </li> <li class="comment even thread-odd thread-alt depth-1" id="li-comment-15949"> <div id="comment-15949"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20100917194505im_/http://0.gravatar.com/avatar/acc920839b13dbdb33c7c00fecc9d470?s=60&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20100917194505/http://www.spartanmoving.com/" rel="external " class="url">San jose movers</a></span> <span class="commentdate"> on September 7, 2010 at 7:19 am</span> </div> <div class="comment-text"> <p>I am news to jquery and I have been enjoying a lot in working in it and the plugin you have posted was simply amazing.I have just started.</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20100917194505/http://bavotasan.com/downloads/full-sizebackground-image-jquery-plugin/?replytocom=15949#respond" onclick="return addComment.moveForm("comment-15949", "15949", "respond", "1748")">Reply</a> </div> </div> </li> <li class="comment odd alt thread-even depth-1" id="li-comment-15953"> <div id="comment-15953"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20100917194505im_/http://1.gravatar.com/avatar/bf35e39d5c17ceaaf7b105c15f0ff4f6?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20100917194505/http://aaronlaibson.com/" rel="external " class="url">Aaron</a></span> <span class="commentdate"> on September 7, 2010 at 12:52 pm</span> </div> <div class="comment-text"> <p>Hi, this plugin is awesome! I made a slight adjustment though to account for people who have javascript turned off. </p> <p>First, add this to your CSS:</p> <div class="wp_syntax"><table border="0" cellpadding="0" cellspacing="0"><tr><td><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #666666; font-style: italic;">#background {display: none;}</span></pre></div></td></tr></table></div> <p>Then, right before</p> <div class="wp_syntax"><table border="0" cellpadding="0" cellspacing="0"><tr><td><div class="code"><pre class="php" style="font-family:monospace;">$<span style="color: #009900;">(</span><span style="color: #0000ff;">'#background'</span><span style="color: #009900;">)</span><span style="color: #339933;">.</span>fullBg<span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span></pre></div></td></tr></table></div> <p>is called, add the following code:</p> <div class="wp_syntax"><table border="0" cellpadding="0" cellspacing="0"><tr><td><div class="code"><pre class="php" style="font-family:monospace;">$<span style="color: #009900;">(</span><span style="color: #0000ff;">"#background"</span><span style="color: #009900;">)</span><span style="color: #339933;">.</span>show<span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span></pre></div></td></tr></table></div> <p>This way, people who don’t (or can’t) use Javascript won’t see a huge image on the page.</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20100917194505/http://bavotasan.com/downloads/full-sizebackground-image-jquery-plugin/?replytocom=15953#respond" onclick="return addComment.moveForm("comment-15953", "15953", "respond", "1748")">Reply</a> </div> </div> <ul class="children"> <li class="comment byuser bypostauthor even depth-2" id="li-comment-15970"> <div id="comment-15970"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20100917194505im_/http://1.gravatar.com/avatar/ba043b2af6a355787f1b6fd1b1ea3eda?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/" rel="external " class="url">c.bavota</a></span> <span class="commentdate"> on September 8, 2010 at 9:47 am</span> </div> <div class="comment-text"> <p>Thanks.</p> </div> </div> </li> </ul> </li> <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-15954"> <div id="comment-15954"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20100917194505im_/http://1.gravatar.com/avatar/bf35e39d5c17ceaaf7b105c15f0ff4f6?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20100917194505/http://aaronlaibson.com/" rel="external " class="url">Aaron</a></span> <span class="commentdate"> on September 7, 2010 at 2:00 pm</span> </div> <div class="comment-text"> <p>Also, for anyone who needs this plugin to work for IE6, insert the following after the plugin call:</p> <div class="wp_syntax"><table border="0" cellpadding="0" cellspacing="0"><tr><td><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #339933;"></span></pre></div></td></tr></table></div> <p>Works like a charm. <img src="https://web.archive.org/web/20100917194505im_/http://bavotasan.com/wp-includes/images/smilies/icon_smile.gif" alt=":)" class="wp-smiley"/> </p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20100917194505/http://bavotasan.com/downloads/full-sizebackground-image-jquery-plugin/?replytocom=15954#respond" onclick="return addComment.moveForm("comment-15954", "15954", "respond", "1748")">Reply</a> </div> </div> </li> <li class="comment even thread-even depth-1" id="li-comment-15955"> <div id="comment-15955"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20100917194505im_/http://1.gravatar.com/avatar/bf35e39d5c17ceaaf7b105c15f0ff4f6?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20100917194505/http://aaronlaibson.com/" rel="external " class="url">Aaron</a></span> <span class="commentdate"> on September 7, 2010 at 2:07 pm</span> </div> <div class="comment-text"> <p>Well, that didn’t work. </p> <p>Use an IE conditional comment to target IE6, then call the following script:</p> <div class="wp_syntax"><table border="0" cellpadding="0" cellspacing="0"><tr><td><div class="code"><pre class="php" style="font-family:monospace;"> </pre></div></td></tr></table></div> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20100917194505/http://bavotasan.com/downloads/full-sizebackground-image-jquery-plugin/?replytocom=15955#respond" onclick="return addComment.moveForm("comment-15955", "15955", "respond", "1748")">Reply</a> </div> </div> </li> </ol> <div class="navigation"> <div class="fl"></div> <div class="fr"><a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/downloads/full-sizebackground-image-jquery-plugin/comment-page-2/#comments">Newer Comments →</a></div> </div> <a name="respond"></a> <div id="respond"> <h3 id="reply-title">Leave a Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="/web/20100917194505/http://bavotasan.com/downloads/full-sizebackground-image-jquery-plugin/#respond" style="display:none;">Cancel reply</a></small></h3> <form action="https://web.archive.org/web/20100917194505/http://bavotasan.com/wp-comments-post.php" method="post" id="commentform"> <p class="comment-notes">Your email address will not be published. Required fields are marked <span class="required">*</span></p> <p class="comment-form-author"><label for="author">Name</label> <span class="required">*</span><br/><input id="author" name="author" type="text" value="" size="30"/></p> <p class="comment-form-email"><label for="email">Email</label> <span class="required">*</span><br/><input id="email" name="email" type="text" value="" size="30"/></p> <p class="comment-form-url"><label for="url">Website</label><br/><input id="url" name="url" type="text" value="" size="30"/></p> <p>To enter code in the comment box, please place it between <strong><pre lang="php"> </pre></strong> tags. You don't have to convert any characters to their hex/HTML code. Just add your code the way you would to any code editor.</p> <p class="comment-form-comment"><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea></p> <p class="form-submit"> <input name="submit" type="submit" id="submit" value="Post Comment"/> <input type="hidden" name="comment_post_ID" value="1748" id="comment_post_ID"/> <input type="hidden" name="comment_parent" id="comment_parent" value="0"/> </p> </form> </div> </div> </div> </div>  <div id="sidebar"> <div id="search"> <form method="get" id="searchform" action="https://web.archive.org/web/20100917194505/http://bavotasan.com/"> <div> <input type="text" class="search_input" value="Search" name="s" id="s" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}"/> <input type="hidden" id="searchsubmit" value="Search"/> </div> </form> <div class="arrow"></div> </div> <div id="sideads">  <div id="bsap_1237633" class="bsarocks bsap_8982c17d635c33dbe23a7ef930777c37"></div>  <br class="clear"/>  <div id="bsap_1237624" class="bsarocks bsap_8982c17d635c33dbe23a7ef930777c37"></div>  </div> <br class="clear"/> <div class="line"></div> <div class="side-widget"> <h4>Most Popular Posts</h4> <ul class="wppp_list"> <li><a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/" title="Creating a Mouseover Fade Effect with jQuery ">Creating a Mouseover Fade Effect with jQuery </a></li> <li><a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/tutorials/a-simple-mouseover-hover-effect-with-jquery/" title="A Simple Mouseover Hover Effect with jQuery">A Simple Mouseover Hover Effect with jQuery</a></li> <li><a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/downloads/full-sizebackground-image-jquery-plugin/" title="Full Size Background Image jQuery Plugin">Full Size Background Image jQuery Plugin</a></li> <li><a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/tutorials/limiting-the-number-of-words-in-your-excerpt-or-content-in-wordpress/" title="Excerpt or Content Word Limit in WordPress: Redux">Excerpt or Content Word Limit in WordPress: Redux</a></li> <li><a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/downloads/magazine-basic-free-wordpress-theme/" title="Magazine Basic v2.6 WordPress Theme">Magazine Basic v2.6 WordPress Theme</a></li> <li><a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/tutorials/retrieve-the-first-image-from-a-wordpress-post/" title="Retrieve and Display Images from a WordPress Post">Retrieve and Display Images from a WordPress Post</a></li> <li><a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/tutorials/how-to-create-a-twitter-feed-on-your-web-site/" title="How to Create a Twitter Feed on Your Web Site">How to Create a Twitter Feed on Your Web Site</a></li> <li><a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/tutorials/processing-multiple-forms-on-one-page-with-php/" title="Processing Multiple Forms on One Page with PHP">Processing Multiple Forms on One Page with PHP</a></li> <li><a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/downloads/6-free-vinyl-record-vectors/" title="6 Free Vinyl Record Vectors">6 Free Vinyl Record Vectors</a></li> <li><a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/tutorials/gradient-buttons-with-css3/" title="Gradient Buttons with CSS3">Gradient Buttons with CSS3</a></li> </ul> </div> <div id="affiliates-ads"> <a href="https://web.archive.org/web/20100917194505/http://themes.bavotasan.com/" class="themes"></a> <a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/downloads/delete-duplicate-posts-pro-wordpress-plugin/" class="deletedupes"></a> <a href="https://web.archive.org/web/20100917194505/https://secure1.inmotionhosting.com/cgi-bin/gby/clickthru.cgi?id=tinkerpriest&page=7" class="inmotion"></a> </div> <div class="line"></div> <div class="side-widget redlink"> <h4>Get a Premium Theme for FREE</h4> <p><a href="https://web.archive.org/web/20100917194505/https://secure1.inmotionhosting.com/cgi-bin/gby/clickthru.cgi?id=tinkerpriest" class="wordpress-logo"></a>Don't have a Web site? How would you like to have WordPress and a <a href="https://web.archive.org/web/20100917194505/http://themes.bavotasan.com/category/premium-themes">Themes by bavotasan.com</a> Premium theme installed and configured for <em>FREE</em>? All you need to do is <a href="https://web.archive.org/web/20100917194505/https://secure1.inmotionhosting.com/cgi-bin/gby/clickthru.cgi?id=tinkerpriest">sign up with InMotion Hosting through this link</a>. <br/> <br/> <a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/free-premium-theme/" class="fr"><em>Click here for more information »</em></a> </p> </div> <div class="side-widget"> <h4>Support c.bavota</h4> <p>If you would like to support <a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/">c.bavota</a> and <a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/">bavotasan.com</a>, please use the donate link below. Any amount, even $1.00, is appreciated (a man's gotta eat, ya know).</p> <a href="https://web.archive.org/web/20100917194505/https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=5745952" id="donate" class="fr">Donate</a> </div> </div> </div> </div>  <div class="whiteline"></div> <div id="footer"> <div id="bottombar"> <a href="javascript:void(0)" class="backtotop">Back to Top<span></span></a> <div class="col col1"> <h4 class="one"><span></span>Stay in Touch</h4> <a href="https://web.archive.org/web/20100917194505/http://twitter.com/bavotasan" class="footer-twitter"><span></span>Follow me on Twitter</a><br/> <a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/feed/" class="footer-rss"><span></span>Subscribe to my RSS Feed</a> <br class="clear"/> <h4 class="two"><span></span>Stay in Tune</h4> <div class="tweets"></div> </div> <div class="col col2"> <h4 class="three"><span></span>Downloads</h4> <ul> <li><a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/downloads/feed-me-seymour-free-wordpress-theme/">Feed Me, Seymour 1.2</a></li> <li><a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/downloads/magazine-basic-free-wordpress-theme/">Magazine Basic v2.6 WordPress Theme</a></li> <li><a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/downloads/sliderota-jquery-plugin/">Sliderota jQuery Plugin</a></li> <li><a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/downloads/full-sizebackground-image-jquery-plugin/">Full Size Background Image jQuery Plugin</a></li> <li><a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/downloads/easy-overlay-modal-window-jquery-plugin/">Easy Overlay Modal Window jQuery Plugin</a></li> <li><a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/downloads/snowblind-free-wordpress-theme/">Snowblind v1.1.2 Free WordPress Theme</a></li> <li><a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/downloads/8-free-colorful-background-textures-for-designers/">8 Free Colorful Background Textures for Designers</a></li> <li><a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/downloads/stationery-premium-wordpress-theme/">Stationery Premium WordPress Theme</a></li> <li><a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/downloads/illustrious-premium-wordpress-theme/">Illustrious Premium WordPress Theme</a></li> <li><a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/downloads/delete-duplicate-posts-pro-wordpress-plugin/">Delete Duplicate Posts Pro WordPress Plugin</a></li> </ul> </div> <div class="col col3"> <h4 class="four"><span></span>Tutorials</h4> <ul> <li><a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/tutorials/text-rotation-css3/">Text Rotation with CSS3</a></li> <li><a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/tutorials/adding-tweet-button-wordpress/">Adding a Tweet Button to WordPress</a></li> <li><a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/tutorials/developing-themes-for-wordpress-make-money/">Developing Themes for WordPress: Part 5</a></li> <li><a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/tutorials/developing-themes-for-wordpress-options/">Developing Themes for WordPress: Part 4</a></li> <li><a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/tutorials/developing-themes-for-wordpress-the-loop/">Developing Themes for WordPress: Part 3</a></li> <li><a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/tutorials/developing-themes-for-wordpress-template-file/">Developing Themes for WordPress: Part 2</a></li> <li><a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/tutorials/developing-themes-for-wordpress-part-1/">Developing Themes for WordPress: Part 1</a></li> <li><a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/tutorials/optimization-tips-speed-up-site/">Optimization Tips to Speed Up Your Site</a></li> <li><a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/tutorials/create-bit-ly-short-urls-for-your-posts-in-wordpress/">Create bit.ly Short URLs for your Posts in WordPress</a></li> <li><a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/tutorials/optimizing-your-mysql-database/">Optimizing your MySQL Database</a></li> </ul> </div> </div> </div> <div id="copyright"> <div id="copyright-wrapper"> Copyright © 2010 <a href="https://web.archive.org/web/20100917194505/http://bavotasan.com/">bavotasan.com</a>. All Rights Reserved. Powered by <a href="https://web.archive.org/web/20100917194505/http://www.wordpress.org/">WordPress</a>. </div> </div> <script src="https://web.archive.org/web/20100917194505js_/http://stats.wordpress.com/e-201037.js" type="text/javascript"></script> <script type="text/javascript"> st_go({blog:'5317602',v:'ext',post:'1748'}); var load_cmc = function(){linktracker_init(5317602,1748,2);}; if ( typeof addLoadEvent != 'undefined' ) addLoadEvent(load_cmc); else load_cmc(); </script> <script type="text/javascript" src="https://web.archive.org/web/20100917194505js_/http://bavotasan.com/wp-content/themes/bavotasan-2010/js/coolstuff.js"></script> <script type="text/javascript"> hs.graphicsDir = 'https://web.archive.org/web/20100917194505/http://bavotasan.com/images/graphics/'; hs.outlineType = 'rounded-white'; hs.outlineWhileAnimating = true; hs.showCredits = false; </script>  </body> </html>

CINXE.COM

Full Size Background Image jQuery Plugin | bavotasan.com