2

I am attaching background images to the body element using this: 

<script>
$(document).ready(function(){

    $("body").css( "background" , "url(someimage.jpg)");

});
</script>

This is nice, but the background images are really large and I would like to fade them in using fadein() or something once they have loaded all the way. However, I can't seem to find a way to do this with jQuery or javascript. Is there one? Any clever suggestions? I can import the jquery-ui library if that would help.

So to be clear, what I need to happen goes something like this:

Page loads -> Image finishes loading -> Image fades into being the background image for the body element

Thomas
  • 5,030
  • 20
  • 67
  • 100
  • possible duplicate of [Animate background image change with jQuery](http://stackoverflow.com/questions/2983957/animate-background-image-change-with-jquery) –  Jun 15 '12 at 12:18
  • you can try css3 transition http://www.mightymeta.co.uk/demos/fading-background-image/ – Ram Jun 15 '12 at 12:21
  • I saw that but it is distinct because I need it to trigger only after the image has loaded. – Thomas Jun 15 '12 at 12:22
  • [Jquery - Background image loaded Check](http://stackoverflow.com/questions/5057990/jquery-background-image-loaded-check) –  Jun 15 '12 at 12:29
  • That one still doesn't address the fadeIn() aspect of the functionality I am looking for. I know how to test for loading and I understand how to use .css() to attach the background image. – Thomas Jun 15 '12 at 12:32
  • @Thomas: What's your point? You wanted solutions to the problem, right? Don't those two posts address your two questions? –  Jun 15 '12 at 12:34
  • No, they don't. I needed to find a way to detect the loading and then fade them in as a background element. Even taken together, these two answers do not solve the problem. – Thomas Jun 15 '12 at 12:35
  • @Thomas: The second one deals with running a function after a background image has loaded. The first one deals with fading a background image. They both deal directly with what you're asking. Right? –  Jun 15 '12 at 12:37
  • I don't know how to combine those two things. That is what I am looking for help with. I understand how to do those things individually but I couldn't conceptually put them together. Im not a very experienced coder. – Thomas Jun 15 '12 at 12:40

2 Answers2

0

Ok, I figured it out, but this was a duplicate as @am not i am suggested (duplicate question).

Working fiddle with my solution: http://jsfiddle.net/kRjrn/8/

HTML

<body>
    <div id="background">.
    </div>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>    
</body>​

javascript

$(document).ready(function(){
    $('#background').animate({ opacity: 1 }, 3000);
});​

CSS

#background {
    background-image: url("http://media.noupe.com//uploads/2009/10/wallpaper-pattern.jpg");
    opacity: 0;
    margin: 0;
    padding: 0;
    z-index: -1;
    position: absolute;
    width: 100%;
    height: 100%;
}​
Community
  • 1
  • 1
Milimetric
  • 13,411
  • 4
  • 44
  • 56
  • So, there are a couple of issues here - Im really looking to dynamically attach the background image, my script pulls random images from a directory and attaches them with JS. I can't use them as preset background images in CSS. Second, due to the nature of the existing site structure, I really don't want to introduce another wrap div and I can't apply it to existing divs because those already have set backgrounds. – Thomas Jun 15 '12 at 15:10
  • This isn't a wrap div, it's just a lone element. Notice nothing has to be inside it, the CSS takes care of positioning it so it looks like it wraps everything. As far as dynamically attaching the images, just load it with jQuery's `css()` method before executing the animate line. – Milimetric Jun 15 '12 at 15:13
-1

Believe it or not, jQuery doesn't support fading background colors! But don't worry... there's a plugin for that!

The "original" background-fading plugin is this one:

https://github.com/jquery/jquery-color

I just found this one too:

http://www.bitstorm.org/jquery/color-animation/

Ayman Safadi
  • 11,502
  • 1
  • 27
  • 41