views:

1053

answers:

3

I am newbie。 How to changing my background-image css property using Mootools?

+1  A: 

The MooTools docs for Element.Style should be able to answer this one for you.

saleemshafi
I saw this code for mootools from http://stackoverflow.com/questions/913173/body-background-image-change-with-fade-effect-mootools$(document.body).setStyle('background-image','url(' + pBackground + ')');But I don't know how to apply it...
efoc
+2  A: 

Example, on page load:

<div id="yourElement"></div>

<script type="text/javascript">
window.addEvent('domready', function() {
    $('yourElement').setStyle('background-image', 'url(path/to/your/image)');
});
</script>
rochal
+1  A: 
window.addEvents({
  // fire when the DOM is loaded
  domready: function(){
    // path to the image
    var pathToBackgroundImage = '/path/to/the/image.jpg';
    // set the background-image
    $(document.body).setStyle('background-image','url(' + pathToBackgroundImage + ')');
  }
});

You need to take a significantly different approach if you decide you'd like to fade-in the image.

Oskar Krawczyk
Thanks. Any demo for fade-in effect for background image? I saw this in http://devthought.com/wp-content/projects/mootools/barackslideshow/Demo/ Is it possible to make it for changing background image?
efoc
It's not as easy. There's no was of strictly morphing the background image of the document. You need to create a faux-background container (a absolutely positioned div, underneath the rest of the body contents) and apply scripts on this element not the Body itself. I've never seen this being done properly before.
Oskar Krawczyk