background image slide show

Question

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 13-Dec-13 14:30pm

deepa ashwi

Updated 13-Dec-13 16:21pm

Chris Maunder772.8K

v2

Add a Solution

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

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

MaddyDesigner · Answer 1 · 2013-12-13T19:30:00

Solution 1

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.

Posted 13-Dec-13 19:30pm

MaddyDesigner

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.