exceeding the background image does not work

advertisements

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.

  1. It doesn't work in safari (chrome/firefox are fine)
  2. 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.


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;
}