I am using the Supersized jquery plugin to create a slide show of background images and text. My problem is that I need my image to have a set with of 1200px. I have no problem creating the look I want, however, I cannot figure how to remove the horizontal scroll bar.
Here is the site I am working on: http://atriaseniorliving.com/roslyntest/
Here is the css:
#supersized {
display:block;
position:absolute;
left:50%;
top:38px;
margin-left:-600px;
overflow-x:hidden;
z-index:-999;
height:472px;
width:1200px;
}
#supersized li {
display: block;
height: 472px;
left: 0;
list-style: none outside none;
overflow: hidden;
position: absolute;
top: 0;
width: 100%;
z-index: -30;
}
The only way I have figured out how to remove the scroll bar is to make the width:100% and then add a max-width:1200px. However, when I do that the background image then slides to the left when you decrease the browser width.
Any help would be appreciated.