Question : Center aligned backround image that extends with div

This might be a little tough to describe, but say I have a background image that is 1200pixels wide, I want it to be center aligned within a div that is 100% width of the table.

So when the browser is only 800px wide, the div is 800px and you're seeing the center 800px of the image ( pixels 200 through 1000 ).

I've tried background-position:cener ( center seems to break it ), and middle ( still left aligned ), not sure if a background image can be center aligned if it's larger than the div.

Anyone know if it's possible?

Thanks

Answer : Center aligned backround image that extends with div

This likely won't work if you have a repeating background.

You ultimately will want something like this [see attached code]:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:



<!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>
	<title>test </title>
	<style type="text/css">
		#myDiv{
			border: 1px solid red;
			background: #fff url('bg.jpg') no-repeat scroll 50% top;
			width: 100%;
			height: 400px;
		}
	</style>
</head>
<body>
	<div id="myDiv">
				
	</div>
</body>
</html>