Question: 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

Answer: 
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);
}

```
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.