CODEWITHSUNDEEP
cssmootools
Pedro
Pedro

Reputation: 2927

body background-image change with fade effect mootools

I'm changing my background-image css property using Mootools:

$(document.body).setStyle('background-image','url(' + pBackground + ')');

And it's its working, but how can a make one fade effect between picture change?

Thanks, Pedro

Upvotes: 1

Views: 15011

Answers (3)

Andru
Andru

Reputation: 7131

Just as a caution, any child elements of that div will also fade, so if you want the background to fade while elements over it remain opaque, you will need to absolutely position any child elements.

Absolutely positioning all elements brings other problems with it when you have variable length content, but there are ways around that too.

Upvotes: 1

zombat
zombat

Reputation: 94177

You can't fade a background specifically... you have to fade the element that has the background.

For your situation, I would suggest using a <div> that encompasses everything in the <body> of your HTML, ie:

<html>
<body>
<div id="main">

</div>
</body>

You could then set the background-image property of the #main div, and do something like this:

function backgroundChange(pBackground)
{
    var m = $('main');
    var fx = new Fx.Tween(m,{
        duration: 1500,
        onComplete: function(){ 
            m.setStyle('background-image','url(' + pBackground + ')');
            m.fade('in');
        }
    });
    fx.start('opacity',1,0);
}

Upvotes: 4

Boris Gu&#233;ry
Boris Gu&#233;ry

Reputation: 47585

Not sure of what i am saying, BUT since it's not a part of the html document, it's not an 'element' so javascript should not be able to work on it.

But, just an idea, and depending on how your site looks, you could try to set an opacity, to simulate an opacity on the body, which can lead to the effect you want..

Upvotes: 0

Related Questions