1

I got this to run properly giving my wrapper a black bg with an opacity on it. the problem comes when i try to change the bg color to have no opacity my content seems to drop behind the bg image.

the code

<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>

the css

#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;
}

the 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");

});
3
  • Have you tried adding a z-index property to the bg and wrapper's CSS? Also, you might be able to consider using background-size and background-attachment CSS properties.
    – jeffjenx
    May 23, 2012 at 18:27
  • might be easier if you use a Jsfiddle, here, I pasted your code jsfiddle.net/79aXy
    – deltree
    May 23, 2012 at 18:29
  • i have tried adding z-index does not work. i dont know how the background-size or background-attachment would help May 23, 2012 at 18:52

1 Answer 1

1

I've updated @deltree's jsfiddle. http://jsfiddle.net/trickeedickee/79aXy/2/

You need to add position: relative; to your .wrapper when you remove the opacity and it will work for you.

.wrapper {
    position: relative;
    }

I hope this helps.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.