TECHNOLOGIES
FORUMS
JOBS
BOOKS
EVENTS
INTERVIEWS
Live
MORE
LEARN
Training
CAREER
MEMBERS
VIDEOS
NEWS
BLOGS
Sign Up
Login
No unread comment.
View All Comments
No unread message.
View All Messages
No unread notification.
View All Notifications
Answers
Post
An Article
A Blog
A News
A Video
An EBook
An Interview Question
Ask Question
Forums
Monthly Leaders
Forum guidelines
deepa ashwi
NA
109
602.2k
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">
Reply
Answers (
0
)
title doesn stay on top
how to calculate total in javascript with buttons