Help centering header's bg image

HTML & CSS
1

Hello,
I am hoping someone can help me find a coding solution to this problem. I have a header with a navigation inside. The header is 985 pixels in width and and that is to fit the width of the navigation, which is 982px.
I have a background for my header, which is only 639px. I was wondering if there is a coding solution to get the background image of my header centred.
When I apply padding on the header it shifts everything to the left becuase the header contains everything in this example.

Here is the code of the area that I am talking about:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<style>
header{
	background:url(headerBg.png) no-repeat 0 0 #F00;
	position:relative;
	width:985px;
	height:194px;
	margin:0px auto 0px auto;
	overflow:hidden;
}

nav ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
margin-top:124px;
text-decoration:none;
width:982px;
height:38px;
background:#000;
}

nav ul li { display: inline; }

nav ul li a
{
text-decoration: none;
color: #fff;
background-color:#CCC;
}

nav ul li a:hover
{
background-color:#666;
}

</style>
</head>
<body>
<header>
		<nav>
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">About</a></li> 
				<li><a href="#">Art</a></li> 
				<li><a href="#">Blog</a></li> 
				<li><a href="#">Games</a></li> 
				<li><a href="#">Media</a></li>
				<li><a href="#">Music</a></li>
				<li><a href="#">Store</a></li>
				<li><a href="#">Contact</a></li> 
			</ul>
    	</nav>
    </header>
</body>
</html>

And this is it online:http://bit.ly/bwpRPX

This is a screenshot of what it looks like now: http://bit.ly/cgoXid
And a second of what I want it to look like:
http://bit.ly/cVJJbC

I have an actual site with an actual design. I am just wire-framing and trying to position things properly. My header background image is of the same width (639px) and the container which it is in is 985px because it hold the navigation that I have sketched which will be 982 pixels.

I hope you guys can help me

Thanks in Advance & Best Regards,
Team 1504

P.S. Is it possible to centre a background image using css when the width of the element it is the background of is bigger than said background?
Or do I have to add padding by extending the canvas size and then exporting the image into a png? However that is a graphical solution, is it possible that there is a coding/solution?

2

Hi,
You should be able to center it by using left 50%

background:url(headerBg.png) no-repeat 50% 0 #F00;

3

Thank you rayzur that did work. I don’t know why I did not think of that. At first my headerBg kept on disappearing but that was because I was doing 50% 0% 0%

Hopefully this short-lived thread will last a reference for anyone else needing help

Thanks again,
Team 1504.