Hi,

 

I have design my site using a jquery slider on the home page. It all works fine apart from the white background behind it.

 

http://www.durningelectrical.co.uk

 

If you look at the other pages, there are images the same size as the slider which have no problems displaying the background image. It is essential to show this on the home page behind the slider because the image has a shadow on it which runs around the full site.

 

My CSS for my banner images is:

 

       position: relative;
width:885px;
height:280px;
background-image: url(images/background.gif);
z-index:-1;
}

 

And my code for the slider is:

 

/* The Nivo Slider styles */
#slider {
       position: relative;
width:770px;
height:280px;
background-image: url(images/background.gif);
z-index:-1;
}

#slider img {
position:absolute;
top:0px;
left:0px;
display:none;
}

.nivoSlider {
position:relative;
}

.nivoSlider img {
position:absolute;
top:0px;
left:0px;
}

/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:60;
display:none;
}

/* The slices in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:50;
height:100%;
}

/* Caption styles */
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#000;
color:#fff;
opacity:0.8; /* Overridden by captionOpacity setting */
width:100%;
z-index:89;
}

.nivo-caption p {
padding:5px;
margin:0;
text-align:right;
}

/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:99;
cursor:pointer;
}

.nivo-prevNav {
left:0px;
}

.nivo-nextNav {
right:0px;
}

/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
position:relative;
z-index:99;
cursor:pointer;
}

.nivo-controlNav a.active {
font-weight:bold;
}

 

 

Any help is much appreciated, I've been stumped for hours on this apparently simple problem.

Sorted now.