Post
Ask Question
deepa ashwi

deepa ashwi

  • NA
  • 109
  • 602.9k

background slide show image not displayed at background

Dec 11 2013 2:58 AM
Hi Friends,
        i am doing a background image slide show at the back of my webpage in my website ,  background image slide show is working correct but the content of webpage is appearing below to my background image slide show actually background image slide show should be at the back of my content ..how to do it?

following is my source code:

<script type="text/javascript">
$(function () {
var currentPosition = 0;
var slideWidth = 1500;
var slides = $('.slide');
var numberOfSlides = slides.length;
setInterval(changePosition, 3000);
slides.wrapAll('<div id="slidesHolder"></div>');
slides.css({ 'float': 'left' });
$('#slidesHolder').css('width', slideWidth * numberOfSlides);
function changePosition() {
if (currentPosition == numberOfSlides - 1) {
currentPosition = 0;
}
else {
currentPosition++;
}
moveSlide();
}
function moveSlide() {
$('#slidesHolder').animate({ 'marginLeft': slideWidth * (-currentPosition) });
}
});
</script>
<style type="text/css">

#slideshow {

position: relative;
}
#slideshow #slideshowWindow {
height: 768px;
margin: 0;
overflow: hidden;
padding: 0;
position: relative;
width: 1000px;
}
#slideshow #slideshowWindow .slide {
height: 768px;
margin: 0;




padding: 0;
position: relative;
width: 1000px;
}
#slideshow #slideshowWindow .slide .slideText {

background-repeat: repeat;
color: #FFFFFF;
font-family: Myriad Pro,Arial,Helvetica,sans-serif;
height: 130px;
left: 0;
margin: 0;
padding: 0;
position: absolute;
top: 130px;
width: 100%;
}
#slideshow #slideshowWindow .slide .slideText a:link, #slideshow #slideshowWindow .slide .slideText a:visited {
color: #FFFFFF;
text-decoration: none;
}
#slideshow #slideshowWindow .slide .slideText h2, #slideshow #slideshowWindow .slide .slideText p {
color: #FFFFFF;
margin: 10px 0 0 10px;
padding: 0;
}
</style> 

<body onload="MM_preloadImages('images/butt1_1.jpg','images/butt2_1.jpg','images/butt3_1.jpg','images/butt4_1.jpg','images/butt6_1.jpg');ShowFlyOver();closeMe();">
 <div id="slideshow">
<div id="slideshowWindow">
<div class="slide">
<img src="Images/bg plotter new.jpg" />

</div>
<div class="slide">
<img src="Images/bgtrai8.jpg" />

</div>

</div>
</div>
<center style="padding-top:13px"> //here starts my webpage contents//

<div id="top-bar"> 
  <div id="topbar-inner">
 
<table border="0" cellpadding="0" cellspacing="0" class="top_bg" style="width: 1034px">