Display images in background of webpage with jQuery

I am trying to get the images of my jQuery slideshow to be in the page background. I have the following code to display my images, some CSS styling and also a jQuery fr开发者_运维技巧amework file, jquery.js.

<div class="images"></div>
<div class="tabs"></div>

<script type='text/javascript'>
$(document).ready(function(){
$("div.tabs").tabs(".images",{img:{
1:"image1.jpg",
2:"image2.jpg",
3:"image3.jpg",
4:"image4.jpg",
5:"image5.jpg",
},
effect:'fade',
fadeOutSpeed:"slow",
rotate:true
});
});
</script>

With this code, how can I make my image display in the background of the page, rather than as an individual image?

Can anyone help?

Thanks in advance, Callum

Here's a different approach to fading images as backgrounds.

$('img').hide();    
function anim() {
    $("#wrap img").first().appendTo('#wrap').fadeOut(1000);
    $("#wrap img").first().fadeIn(1000);    
    setTimeout(anim, 2000);
}
anim();

Check working example at http://jsfiddle.net/Z9d7V/1/

Usually with jquery changing background is easy.

$("body").css("background-image","image.png"); 

You are free to use the way you want.

$("body").css("backgroundImage","imageUrl");

is what you would use to set the body's background image.

how can I make my image display in the background of the page, rather than as an individual image?

You have to use css styling to set that image as a background-image property.

But then it won't work as a slideshow. But you could get to the similar effect if you would create some div, which will be between html body and your content - so it will act like a page background. Then you can put images into that layer, slideshow them and put your content above this all with css positioning.

Edit: Hussein posted example of what I was describing (part of it), so take a look at that.