HTML Forum

**funkdaddu** · 03-21-2005, 10:09 AM

I'm trying to get a background image and an image in the body to line up:

HTML Code:

<!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>TEST Page</title>
		<style type="text/css" media="screen"><!--
body   {
	background-color: #004786;
	background-image: url("http://www.siriusad.com/sta/images/v_bg.gif");
	background-repeat: repeat-y;
	background-position: center 0;
	text-align: center
	}

--></style>
	</head>

	<body bgcolor="#ffffff">
		<img src="http://www.siriusad.com/sta/images/v_bg.gif" alt="" height="100" width="780" border="0">
	</body>

</html>

The body image and background image are the same, and both centered, so you should not be able to see where one starts and the other ends. Now this works fine in Safari and FireFox, but (like always) it doesn't work in IE6. There is a 1px offset between the body content and the background image. Is there any way to get rid of this offset without affecting other browsers. Thanks.

**Wassercrats** · 03-21-2005, 10:41 AM

You can use Conditional comments. I don't know if there's a simpler way.

**techwench** · 03-21-2005, 10:48 AM

Try removing the "0" in "background-position". I use this quite a bit, and haven't had any problems with things lining up just using:

Code:

background-position: center;

**funkdaddu** · 03-21-2005, 04:59 PM

I removed the "0" - no effect, ended up taking Wassercrats' advice. Kinda sad that MS can't even center an image correctly... and it's not getting any better with IE7 i hear...

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!