You’ve got two background images sitting over the top of it:
firstly
#wrapper {
[COLOR="Red"]background: url("images/wrapper-bg.png") repeat-y scroll center top transparent;[/COLOR]
margin: -65px auto auto;
min-height: 100%;
overflow: hidden;
width: 725px;
}
then
#content-bar {
[COLOR="Red"]background: url("images/bg.jpg") no-repeat fixed center top transparent;[/COLOR]
border-bottom: 40px solid #006C67;
height: 100px;
}
A quick fix would be to replace that second background image with an image that is black at the top (to match the black band) with some blue underneath.
It didn’t just suddenly happen, though. You have deliberately placed two images over the top of the black background, so there is nothing unexpected here.
The HTML is different on those two pages—a quick look should show you that. In the page that’s working, you have a header div wrapped around the top-bar and logo, and it has a z-index that lifts it above the wrapper div. On the second page, that header div is missing.