Solved

div background centering

Posted on 2011-09-28
8
146 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
 
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Help in CSS 5 45
Adding Pipe Delimeter  between buttons in css 4 26
How can I make a css class read only with jquery? 2 37
jquery add something to a div 4 37
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
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…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

939 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now