Полноэкранный фон с jquery css

Question

Я получил это для правильной работы, придав моей обертке черный bg с непрозрачностью на нем. проблема возникает, когда я пытаюсь изменить цвет bg, чтобы не было непрозрачности, мой контент, кажется, падает за изображение bg.

код

<img src="bg.jpg" id="bg" alt=""> 
<div class="wrapper"> 
    <div class="main"> 
     <h1>Full Screen</h1> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus, sem id feugiat lobortis, felis velit dignissim sem, et pretium orci est et magna. Nunc non massa id odio ultrices varius. Nulla consequat sollicitudin erat sed condimentum. Cras vel magna ut tellus rhoncus dictum. Nulla dictum adipiscing quam vel condimentum. Aliquam accumsan quam in libero vehicula vel sodales justo tempus. Duis mattis leo a urna feugiat eleifend. Suspendisse cursus molestie est ornare sodales. Sed justo risus, mattis a tincidunt facilisis, mattis porta tortor. Nunc ac quam justo.</p> 
    </div> 
</div> 

устанавливаемыми сотовыми

#bg { 
    position: fixed; top: 0; left: 0; 
} 
.bgwidth { 
    width: 100%; 
} 
.bgheight { 
    height: 100%; 
} 
.wrapper{ 
    width:960px; 
    /*border-radius: 10px; 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    box-shadow: 0px 0px 10px #000; 
    background-color:#000; 
    filter: alpha(opacity=30); 
    opacity: 0.3;*/ 
    background-color:#000; 
    margin-left:auto; 
    margin-right:auto; 
} 

в JS

$(window).load(function() {  

    var theWindow  = $(window), 
     $bg    = $("#bg"), 
     aspectRatio  = $bg.width()/$bg.height(); 

    function resizeBg() { 

     if ((theWindow.width()/theWindow.height()) < aspectRatio) { 
      $bg 
       .removeClass() 
       .addClass('bgheight'); 
     } else { 
      $bg 
       .removeClass() 
       .addClass('bgwidth'); 
     } 

     var newWidth = theWindow.width()-$bg.width(); 
     var newHeight = theWindow.height()-$bg.height(); 
     //alert(newWidth + "-"+ newHeight); 
     $bg.css("left",(newWidth/2)+"px"); 
     $bg.css("top",(newHeight/2)+"px"); 
    } 

    theWindow.resize(function() { 
     resizeBg(); 
    }).trigger("resize"); 

}); 

Answer 1

Я обновил @ jsfiddle DelTree в. http://jsfiddle.net/trickeedickee/79aXy/2/

Вы должны добавить position: relative; в ваш .wrapper, когда вы удалите непрозрачность, и он будет работать для вас.

.wrapper { 
    position: relative; 
    } 

Надеюсь, это поможет.