asked on

div background centering

I have an image, its rather large and yes I will be trimming it :) but I would like it to center center on the screen.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
<title></title>
		
<style type="text/css" media="screen">
<!--
body {
	color: white;
	background-color: #fff;
	margin: 0px
}

#horizon {
	color: white;
	background-color: #fff;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 0px;
	width: 100%;
	overflow: visible;
	visibility: visible;
	display: block
}

#content {
	font-family: Verdana, Geneva, Arial, sans-serif;
	background-color: #fff;
	position: absolute;
	top: -35px;
	width: 100%;
	height: 547px;
	visibility: visible
}

.centerbox {
	font-size: 14px;
	width: 100%;
	height: 547px;
	background:url('img/ring_of_kerry_beach_ruins.jpg');
	background-repeat:no-repeat;
	background-attachment:fixed;
	background-position:center
	
}

-->
</style>
</head>
<!-- ring_of_kerry_rainbow.jpg -->
<body>

<div id="horizon">
	<div id="content">
		<div class="centerbox">
			&nbsp;
		</div>
	</div>
</div>
			
</body>

</html>

Open in new window

I have it so its doing that however the top seems to be getting cut off. I know the size of the image and have the height set to that however the image still seems to be cut in 1/2

URL: http://tinyurl.com/3t5qshr

iceman19330

ASKER

I did some playing around and if I remove the top: 50% in horizon the top of the image now shows and the bottom is cut off. lol