Background image won't fade in

Question

I'm trying to get this background image to fade into the div once the user has scrolled to the middle of it. Right now, the background image appears, but doesn't fade in. Here's a fiddle: http://jsfiddle.net/8eudrmcx/

HTML

div {
  background-color: #000;
  height: 500px;
  width: 500px;
}

JS

function isScrolledIntoView($elem) {
   var docViewTop = $(window).scrollTop();
   var docViewBottom = docViewTop + $(window).height();

   var elemTop = $elem.offset().top;
   var elemMiddle = elemTop + $elem.height()/2;
   return docViewBottom >= elemMiddle && docViewTop <= elemMiddle;
}
$(window).scroll(function(){
   $elem = $("div"); //or what element you like
   if(isScrolledIntoView($elem)){
      $elem.css('background-image','url("img/background.jpg")').fadeIn();
   }
});

score 1 · Accepted Answer · answered Sep 25 '14 at 20:10

1

So you are fading in the div not the background image with your code. The div is visible.

http://jsfiddle.net/8eudrmcx/1/

http://jsfiddle.net/8eudrmcx/2/

Set the div to display: none and it will fade in. You can set the bg image in css too.

answered Sep 25 '14 at 20:10

Leeish

5,203
2
17
45

Well, I want to keep the div's background black and have an image fade into it. So I don't want to fade in the div, but just the background image. – J82 Sep 25 '14 at 20:11
http://stackoverflow.com/questions/7319552/can-i-fade-in-a-background-image-css-background-image-with-jquery Possible duplicate. – Leeish Sep 25 '14 at 20:11
http://stackoverflow.com/questions/16905621/how-to-fade-in-background-image-by-css3-animation – Leeish Sep 25 '14 at 20:12
You can't do that really. You can do other things like place an absolute positioned image in there and fade that in, but background images cannot be faded in like you want. Here is another link: http://stackoverflow.com/questions/3079330/css3-fade-effect – Leeish Sep 25 '14 at 20:13
I've decided to go the absolute positioned image route. I made a fiddle here but can't get it to work. What am I doing wrong? http://jsfiddle.net/8eudrmcx/9/ – J82 Sep 25 '14 at 20:24
http://jsfiddle.net/8eudrmcx/10/ you can't use background image. You must use a normal image and fade it in. – Leeish Sep 25 '14 at 20:34
It still looks like it's fading in right as I start scrolling and not when I reach the middle of the div. I can see the top of the image fade in as soon as I start to scroll a tiny bit. – J82 Sep 25 '14 at 20:38
Oh I didn't even look at your scrolled into view code I just looked at your not fading in part. – Leeish Sep 25 '14 at 20:40
Yeah, that's where the focus was but somewhere along the middle, it started not fading in towards the middle. Agh, any ideas? – J82 Sep 25 '14 at 20:42
Ah, makes perfect sense. Thank you! – J82 Sep 25 '14 at 20:53
Sorry to bug you but one more thing. Is it possible to put text inside the div and not have the overlay cover it up? How would you suggest I go about this? I completely forgot about the text I have to put in. Here's a fiddle: http://jsfiddle.net/8eudrmcx/15/ – J82 Sep 25 '14 at 21:05

Background image won't fade in

1 Answers1