Well, not a lot of help there then.
For anyone who comes upon the same problem, I solved it by putting a wrapper around the header and putting the background gradient inside it. I didn't want to use an extra div and I still don't understand why it should be necessary, but there you go.
I positioned the header inside the wrapper by making it position: relative and using top:4em and margin:auto.
At least now it works.