Problems with vertical centering and divs taking up space

[Smashman]

Hi there, I've got a few problems that I've been trying to remedy today.

I have an image 930 pixels high that I want to center in the exact middle of the screen. I used a recommended CSS snippet.

position: absolute;
top: 50%;
left: 50%;
width: 1280px;
height: 930px;
margin-top: -465px;
margin-left: -640px;

But unfortunately, if the viewport is smaller than 930px, it starts to crop the top of the area. I've tried a few methods, but nothing seems to help.

Also, in Chrome I've managed to get it so a number of sized, but moved divs don't require scrolling, however in Firefox and IE they seem to still take up space that they would before moving (using left: and top:)

Any help would be appreciated, thanks.

[Noble]

Try this. this is what im using for the background image on my site. I put it in the body css tag

body {
	background-image: url(images/background.png);
	background-attachment:fixed;
	background-repeat: no-repeat;
	background-position:center;
}

As for the divs thing could you provide a screenshot or something?

[Smashman]

Hmm, that seems to have the same problem I had with the original method. It gets cut off at the top if the viewport is smaller than the image.

I've got a number of divs that have specified heights. Now, I've moved them onto the image, to make clickable areas using the left and top commands. In Chrome, there is no scroll bar, as they all take up the correct space (on the image), annoyingly, in IE and Firefox they still seem to take up the original space before moving, meaning that there is a lot of spare space beneath my image. Is there anything that can be done about that?

[bbang]

[QUOTE=Smashman;31246477]Hmm, that seems to have the same problem I had with the original method. It gets cut off at the top if the viewport is smaller than the image.

I've got a number of divs that have specified heights. Now, I've moved them onto the image, to make clickable areas using the left and top commands. In Chrome, there is no scroll bar, as they all take up the correct space (on the image), annoyingly, in IE and Firefox they still seem to take up the original space before moving, meaning that there is a lot of spare space beneath my image. Is there anything that can be done about that?[/QUOTE]

Put the page on [url]http://jsfiddle.net/[/url] so we can fix this problem.

[Meekal]

CSS:
#centre_image {
position:absolute;
margin-left:auto;
margin-right:auto;
width:200px;
min-height:930px;
text-align:center;
}

HTML:
<div id="centre_image">
<img src="path/to/your/image.jpg" />
</div>

I haven't tested this, but that should make your image stay in the centre of the webpage. I'm not sure of the width of your image, so you'll need to change the width to suit.