Solved

div background centering

Posted on 2011-09-28
8
149 Views
Last Modified: 2012-06-22
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
0
Comment
Question by:iceman19330
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4
8 Comments
 

Author Comment

by:iceman19330
ID: 36717071
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
0
 
LVL 30

Expert Comment

by:LZ1
ID: 36717364
So you want the whole image in the center of the screen regardless of the resolution???
0
 

Author Comment

by:iceman19330
ID: 36717418
roughly, I have kept the images wide so that on most screens it would fill up the screen
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 30

Expert Comment

by:LZ1
ID: 36717498
Have you tried starting here?
http://css-tricks.com/snippets/css/exactly-center-an-imagediv-horizontally-and-vertically/

Adjust your sizes accordingly, then add your background image.
0
 

Author Comment

by:iceman19330
ID: 36717595
Kinda used that and now the full image shows up but it shows up at the bottom
0
 
LVL 30

Accepted Solution

by:
LZ1 earned 500 total points
ID: 36717684
What if you attached the background to the body?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
<title>test</title>
		
<style type="text/css" media="screen">
<!--
body {
	color: white;
	margin: 0px;
	background:#fff url(http://mccullough-net.com/img/ring_of_kerry_beach_ruins.jpg) no-repeat fixed center center;
}

#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;
	position: absolute;
	top: 50%;
	width: 100%;
	height: 1000px;
	visibility: visible
}

.centerbox {
	font-size: 14px;
	width: 100%;
	height: 546px;
}

-->
</style>
</head>
<body>

<div id="horizon">
	<div id="content">

		<div class="centerbox">
			&nbsp;
		</div>

	</div>
</div>
			
</body>

</html>

Open in new window

0
 

Author Closing Comment

by:iceman19330
ID: 36717881
That works :)

ty
0
 
LVL 30

Expert Comment

by:LZ1
ID: 36717900
Glad it worked for you. I like to keep things as simple as possible. Good luck!
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

726 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question