Search code examples
jquerycssbackground-imagefade

how to blend-out a background image when scrolling down

I have one page website on which I would like to fade out the <body background on scroll down. I have tried around with jQuery but seem unable to find the correct selector. I can get my <body elements to fade but the background-image stays at full opacity. I've tried:

 $(window).scroll(function() {
    $("body").css({
        'opacity': 1 - (($(this).scrollTop()) / 250)
    });
    });

Please see: http://inetgate.biz/ron.eggler/

Solution

  • you are trying to decreases the opacity of body, it meant on scroll it will hide entire content, i think you can achieve the desired effect if you create a new div right underneath body and then put the big image on that div directly or as a background image and set the div property as absolute and 100% width height, And then add you js like this

    $(window).scroll(function() {
$("new div id ").css({
'opacity': 1 - (($(this).scrollTop()) / 250)
})
});