CSS Image Placement

irmongoose

macrumors 68030
Original poster
How do you place an image on the very top or very bottom of a page, centered, without any gaps between the edge of the window and the image using CSS? The effect I want is as shown on this site... anyone that can help? Thanks...




irmongoose
 

mnkeybsness

macrumors 68030
Jun 25, 2001
2,511
0
Moneyapolis, Minnesota
Ummmm... I'm assuming you want a background image on something?

First you'll need a containing <div> which allows all of your content to get centered. When the body is set to align center, and the following block element has auto margins, it will end up centering itself. Then it is all a matter of giving your header div a height and change the path to the background image.

Code:
body { text-align: center; }

div#container {
	text-align: left;
	width: 700px; /* Change to fit your needs */
	margin: 0 auto;
}

div#header {
	text-indent: -999em;
	height: 200px; /* Change to fit your needs */
	background-image: url(path/to/image.jpg); /* Change to fit your needs */
	background-position: center;
	background-repeat: no-repeat;
}
 

irmongoose

macrumors 68030
Original poster
Thanks for the help, mnkeybsness, I guess I didn't make it clear what I wanted.

Basically, yes I want a background image, but the problem I am encountering is that the image is not showing on the very bottom of the window, i.e. there is a gap between the edge of the window and the edge of the image. In the site I had linked to, the image on the top is at the very top, no gaps. That's the effect I want, except I want it on the bottom. I tried recreating it by simply copy-pasting and changing around the source code of that page, but it didn't work. Any ideas on how to do it?

Thanks.

Great CSS site, by the way. Your coding is quite efficient, as far as I can tell. Amazing.




irmongoose
 

dornoforpyros

macrumors 68040
Oct 19, 2004
3,070
3
Calgary, AB
not sure if it's of any help, but I assume background-position: bottom; might accomplish what you want:


body {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #D3D4D6;
background-color: #93979C;
background-image: url(images/bg.jpg);
background-repeat: repeat-x;
background-position: top;
margin: 0px;
padding: 0px;
}
 

irmongoose

macrumors 68030
Original poster
OK, that has gotten it pretty close, thanks :D

But there is still a problem... I have it set to no-repeat but it is rendering the picture with two of them on top of each other.

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Page Title</title>
<style title="Default" media="screen" type="text/css">
body {
background-color: #999999;
background-image: url(ConceptualismTwoSmall.png);
background-repeat: no-repeat;
background-position: center, bottom;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
</body>
</html>
It's probably all messed up, can you help me fix this?

By the way, in Firefox it doesn't even load the image on the bottom center... :(




irmongoose