Solved

div background centering

Posted on 2011-09-28
8
147 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
  • 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
Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

 
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

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
jQuery Animation faster 5 48
Why is this panel heading creating extra space 2 49
Only three borders showing on image 5 18
css selector 1 16
CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

776 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