Click here to Skip to main content
15,946,988 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I am creating 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:
HTML
<script language="Javascript" 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">
Posted
Updated 13-Dec-13 16:21pm
v2
Comments
ZurdoDev 13-Dec-13 20:37pm    
What's the question?
JOE Heart Under Blade 13-Dec-13 22:25pm    
did you mean that your background image slide show like a content as your webpage content? the background image didn't run as a background during runtime but run as content in the webpage?

1 solution

If you want to place your background images as a slideshow, then you need to have the z-index property of that element inside your css file.

so in your case, it should be like ->

CSS
#slideshow {
   position: absolute;
   z-index: -99999px;
}


Hope This Helps You.
 
Share this answer
 
Comments
deepa ashwi 14-Dec-13 4:34am    
@ maddy ..i changed according to what u mentioned but content area is invisible in this case
MaddyDesigner 14-Dec-13 7:21am    
Analyze your code again, and then see where you have made mistake. Keep changing/working with the z-index property to different elements and then try.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900