background image overflow not working - html

Question

I'm having a little trouble getting this image to be displayed correctly.
I have my site setup with a width of 940px and I want to keep this width but have a div within this that is wider and overflows so that you can still see this on larger displays.
<div id="cinema-wrapper">
<div id="cinema-displays"></div>
</div>
#cinema-wrapper {
width:940px;
height:764px;
}
#cinema-displays {
background-image: url(../mackbyte_files/img/cinema-bg.png);
height: 764px;
width: 3109px;
background-repeat: no-repeat;
position: absolute;
left:50%;
margin-left:-1554.5px;
overflow:visible !important;
}
This works (kinda) but I'm left with two problems.
It doesn't work in safari (chrome/firefox are fine)
It leaves a scroll option only to the right. (e.g. I can scroll further to the right to see the overflowed image).
For 2, I only want the user to see the amount of image depending on their screen resolution.
PS. I know 3109px is huge for web and screen res but im working on a fix before I continue with the image to make it smaller; however, when I do I will still have this issue.

Answer 1

what controls if the inner div is visible or not outside the cinema-wrapper is the overflow of the parent, that you are not setting. so, you should do
#cinema-wrapper {
width:940px;
height:764px;
overflow:visible;
}

Answer 2

I've also experienced that kind of problem so here's my approach.
for the HTML:
<div id="cinema-wrapper">
<div id="cinema-subwrapper">
<div id="cinema-displays"></div>
</div>
</div>
for the CSS:
#cinema-wrapper {
width: 940px;
height: 764px;
overflow: visible;
position: relative;
}
#cinema-subwrapper {
display: inline-block;
position: relative;
right: -50%;
}
#cinema-displays {
background: url(../mackbyte_files/img/cinema-bg.png) center top no-repeat;
height: 764px;
width: 3109px;
position: absolute;
left: -50%;
}
Hope this helps. :)