jQuery로 배경 이미지의 크기를 조절하는 방법

Question

모두! jQuery로 배경 이미지의 크기를 조정하는 데는 두 가지 문제가 있습니다. 첫째로, 나는 신비한 두루마리 막대기가있다. 그리고 오버플로 이미지를 숨길 수 없습니다.

내 코드는 다음과 같습니다 ...

HTML

<div id="imageBG"></div> 
<div id="container" closs="clearfix"> 
    <header> 
     <div id="header"> 
      <h1>飯香岡八幡宮</h1> 
      <p>0436-41-2027</p> 
     </div> 
    </header> 

    <div id="rightColumn"> 
    <nav class="clearfix"> 
     <ul class="clearfix"> 
      <li><a href="#">TOP</a></li> 
      <li><a href="#">NEW</a></li> 
      <li><a href="#">INTRODUCTION </a></li> 
      <li><a href="#">MAP</a></li> 
      <li><a href="#">SPECIAL</a></li> 
     </ul> 
     </nav> 

    <div id="content" role="main"> 

    </div><!-- end #content --> 
</div><!-- end #rightColumn --> 

    <footer> 

    </footer> 

</div><!-- end #conteiner --> 

    <!-- JavaScript at the bottom for fast page loading --> 

    <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline --> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script> 

    <!-- scripts concatenated and minified via build script --> 
    <script src="js/plugins.js"></script> 
    <script src="js/script.js"></script> 
    <!-- end scripts --> 

    <!-- Asynchronous Google Analytics snippet. Change UA-XXXXX-X to be your site's ID. 
     mathiasbynens.be/notes/async-analytics-snippet --> 
    <script> 
    var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']]; 
    (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0]; 
    g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js'; 
    s.parentNode.insertBefore(g,s)}(document,'script')); 
    </script> 
</body> 
</html> 

CSS

#container { 
    margin: 0 auto; 
    padding: 0 auto; 
    width: 98%; 
    min-width: 1250px; 
    height: 100%; 
    position: fixed; 
    z-index: 15; 
} 

#imageBG { 
    width: 100%; 
    height: 100%; 
    background-image: url('../img/theme_bg.jpg'); 
    position: fixed; 
    top: 0; 
    left: 0; 
    z-index: 5; 
    overflow: hidden; 
} 

자바 스크립트

$(document).ready(function() { 

    // Adjust the window 
    $.event.add(window, 'resize', adjustImageBGAndGrid); 

}); 

function adjustImageBGAndGrid() { 

    var windowHeight = $(window).height(), 
    windowWidth = $(window).width(), 
    containerHeight = $('#container').height() + 300, 
    ratio = 1280/720; 


    // adjust the container and body height so we scroll correctly 
    // in most major browsersm including iPad 
    if (windowHeight < containerHeight) { 
     $('body').css('height', containerHeight); 
    } else { 
     $('body').css('height', windowHeight); 
    } 

    // adjust the size of the background grid image and video 
    if (Math.round((windowWidth/windowHeight)) < ratio) { 
     $('#imageBG').css({ 
      'width': 'auto', 
      'height': '100%', 
      'left': '0px', 
      'right': '0px', 
      'top': '0px', 
      'bottom': '0px' 
     }); 
    } else { 
     $('#imageBG').css({ 
      'width': '100%', 
      'height': 'auto', 
      'left': '0px', 
      'right': '0px', 
      'top': '0px', 
      'bottom': '0px' 
     }); 
    } 
} 

몇 가지 도움과 조언이 필요합니다. 협조 해 주셔서 감사합니다!

Answer 1

편집

난 그냥 당신이 정말로 필요있어 :

http://jsfiddle.net/KqQJX/1/

이 튜토리얼에 따라 : 너무 많은 코드

http://unstoppablerobotninja.com/entry/fluid-images