Extra image before the #content section

In the “header” section, I have a background that repeats both horizontally and vertically, of a football field. I want to add a logo in the middle of this area, so that when you scroll down to the #content section, just past the navigation menu, the #content section will cover up the logo (without moving the logo).

I added a div in header.php for the logo:

#site_logo {
	position: fixed;
	width: 540px;
	height: 406px;
	background: url('logo.png') no-repeat;
	margin: auto;
	top: 130px;
	left: 0;
	right: 0;
}

As it is now, scrolling down to the #content section, the logo goes under the navigation menu but over the #content section. Am I missing something? It seems like the header area should be a layer, then the logo on top of that, then the #content section on top. Like it’s an issue with z-index or something. I just can’t figure out how to get the logo to go under #content.