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
2009-11-16 15:13:10
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
2009-11-16 15:36:56
+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
2009-11-16 15:56:47
+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
2009-11-16 17:28:44
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
2009-11-17 05:17:45
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
2009-11-20 10:20:20