Question

I’ve been baffled by a CSS issue with a fixed header, so I’ll just jump into it.

Basically I’m using the same image fixed position for both the header and a div in the body, to make it look like a seamless background. Then as you scroll down, the content in the div goes under the transparent header. But something is going wrong once I scroll past the end of the div with the background image. I’ve played with z-index, but Chrome/Safari doesn’t seem to like that. (I can only imagine how IE would handle this). Works as intended for me on Firefox 16.

Anyways, the site itself is at http://www.meeker.io. Any help in the right direction is greatly appreciated.

Answer 1

try changing your css:

.topBar {
    background: url(bgRailsColor3.png) no-repeat top left;
}
.rails {
    background: url(bgRailsColor3.png) no-repeat top left fixed;
}