I want to fadeout my top image when I scroll down, so that it is pletely black by the time it has scrolled off the page and pletely normal when I am at the top of the page.

This is my JSFiddle.

This section of code:

<div class="jumbo midheight">
   test<br />test
</div>

I have my background color as black so I was thinking it would be smart just to fadeout my background-image element but it seems that isn't possible.

Does this mean I have to put an overlay onto the div itself?
And if so, how do I do it?

Ideally I'd like to avoid adding an overlay div on top but I think I might have to.

I want to fadeout my top image when I scroll down, so that it is pletely black by the time it has scrolled off the page and pletely normal when I am at the top of the page.

This is my JSFiddle.

This section of code:

<div class="jumbo midheight">
   test<br />test
</div>

I have my background color as black so I was thinking it would be smart just to fadeout my background-image element but it seems that isn't possible.

Does this mean I have to put an overlay onto the div itself?
And if so, how do I do it?

Ideally I'd like to avoid adding an overlay div on top but I think I might have to.

• javascript
• jquery
• html
• css

• 1 You can't fade background images - just the whole element. You'll need an individual element (either an img or a div with a background image) and fade that instead. Look at $(window).on("scroll") – Reinstate Monica Cellio Commented May 13, 2014 at 8:13

3 Answers 3

You want to fade it to black, so - no, you can't fade a background image, but that's easy enough to get around. I used an overlay. I just positioned the div with the background image relative. Put another div inside and called it black overlay along with some added css and js. CSS:

#blackOverlay{background-color:#000;opacity:0.0;position:absolute;top:0;width:100%;height:100%;}

JS:

  $('#blackOverlay').css('opacity',currentScrollTop/$('#blackOverlay').height());

Here's the fiddle http://jsfiddle/KCb5z/21/

I took out your js for simplicity, but you can see what I was going for there. that should get you started.

• edit just saw you said you didn't want to use an overlay, but why not? easy solution.

What Archer said is correct. The logic for the scrolling to fadeout is pretty simple. Just calculate the alpha value depending on your current scrolltop value.

I extended your sample with this:

http://jsfiddle/KCb5z/15/

to mention:

...
var currentJumboAlpha = Math.max(1 - ((currentScrollTop * 100 / jumboHeight) / 100), 0);
...

Hope this helps you

You will have to use an overlay div. This answer is aimed at being simpler than the other two, but they seem to work effectively too

http://jsfiddle/jabark/KCb5z/20/

JS:

function CheckScroll(el) {
    var topVal = el.outerHeight(true);
    var bottom_of_object = el.offset().top + topVal;
    var top_of_window = $(window).scrollTop();
    var amountOff = bottom_of_object - top_of_window;
    var opacity = amountOff / topVal;
    el.find('#FadeMe').css('opacity',opacity);
}

$(window).scroll(function(){
    CheckScroll($('.jumbo'));        
});

HTML:

<div class="jumbo midheight">
    <div id="FadeMe"> </div>
</div>

CSS:

#FadeMe {
    position:absolute;
    top:0;
    left:0;
    height:400px;
    width:100%;
    background-image: url("http://www.vlime.co.nz/images/buttons/backgroundimage.jpg");
    background-attachment: fixed;
}
.jumbo {
    background: black;
    position:relative;
}