ansaurus

Question

A way to fade in the background on load?

Answer 1

A:

You may do it by using some css. No need to use jquery or javascript i think..

sarimura 2009-06-28 18:18:43

-1 'some CSS' is not an answer

victor hugo 2009-06-28 18:29:12

What would be the CSS to "fade in" (if you don't use this esoteric CSS 3 animation module [which I think they have already dropped again])?

Boldewyn 2009-06-28 19:09:21

Looking at it around one year later, it's actually possible to fade something in via CSS3 now, though, but I'm sure the author was not so farsighted at the time of writing.

Brandon Wang 2010-07-08 13:53:16

Answer 2

+3 A:

Yep:

Don't give the body a background image. Then prepare an animated GIF with the fading effect. In Javascript:

document.onload = function () {
  window.setTimeout (function () {
    document.getElementsByTagName ("body")[0].style.backgroundImage = "url(/path/to/image.gif)";
  }, 500);
};

In jQuery it would be

$(function () {
  $('body').css ('backgroundImage', 'url(/path/...)');
});

If you don't want to do the animated GIF trick, but need support for JPEG or PNG, it get's nasty. You'll have to create a placeholder <div/>, position it to the right place and play with opacity. You also have to detect when the background image has loaded, so that you don't get silly jumps on slow connections. A non-working example:

var x = new Image();
x.onload = function () {
  /*
    create div here and set it's background image to
    the same value as 'src' in the next line.
    Then, set div.style.opacity = 0; (best, when the
    div is created) and let it fade in (with jQuery
    or window.setInterval).
  */ };
x.src = "/path/to/img.jpg";

Cheers,

Boldewyn 2009-06-28 18:22:34

@Boldewyn you'd like to edit your question instead of posting comments. BTW nice avatar ;)

victor hugo 2009-06-28 18:37:26

done, thanks for point out (and for the comment on my avatar ;-) ).

Boldewyn 2009-06-28 19:06:25

Answer 3

+1 A:

I haven't done this myself, but it might work.

You could, I guess, setup the background image and then mask it with a big old div that has a black background. Then play with opacity of this div to create the fade effect. This black div would have to cover the entire body.

Assaf Lavie 2009-06-28 18:34:11

I think this seems like the best way because I have to have it work for users who don't have JS enabled.

Brandon Wang 2009-06-28 20:19:59

Answer 4

+1 A:

I'm not sure if there is a way to have the background image fade in, but one way you could do it is using an absolutely positioned image with a negative z-index. You could then use jquery to fade in the image. This approach might be trickier if you need the background image to tile or repeat.

The HTML:

<body style="z-index: -2">
<img src="backgroundImage.jpg" id="backgroundImage" style="position: absolute; top: 0px; left: 0px; z-index: -1; display: none;">
<!-- The rest of your HTML here -->
</body>

The jQuery:

$(window).load(function() {

    $("#backgroundImage").fadeIn("slow");
});

Matt Bridges 2009-06-28 18:35:22

You should use $(window).load () instead of $(document)ready(), because this way you ensure, that the image has already loaded. Then, this way is equivalent (modulo the page semantics) to my approach.

Boldewyn 2009-06-28 19:07:42

Another problem: z-index:-1 makes the img go **behind** the body element. If the body has a background applied to it, you won't see the img. It is sufficient, if you skip the z-index and make sure, that the img element is the very first element in your body.

Boldewyn 2009-06-28 19:11:42

You're right, I modified the example code. I actually like the solution where you create a div as large as the rendered page and fade it out (takes care of the problem with tiling/repeating backgrounds). You have to make sure your div is big enough though, or use the offsetHeight and offsetWidth of the whole document.

Matt Bridges 2009-06-28 19:53:17

Answer 5

A:

i see this link ,

http://fragged.org/dev/changing-and-fading-body-background-image.php

the idea is :

apply your background to a div that's assigned a low z-index, absolute positioning and a background (think of it as a reverse / back modal). then produce your content into another layer on top of it with a transparent background....

you can now reference the bottom layer by id and change the opacity.

all it needs is a stack / array of background mages to apply as a property to the layer...

Haim Evgi 2009-06-28 18:36:44

Answer 6

A:

Why not use a ready-made script : this one makes a background image fade-in on page load :

http://www.webbricks.org/bricks/bgMax/

(It also fits the image to the dimensions of the window, but this can be disabled if not needed)

Erwan 2010-07-08 00:21:33

ansaurus

tags:

views:

answers:

A way to fade in the background on load?

related questions