I’ve tried doing the same thing, but couldn’t get it working myself. So if anyone else is reading this and would like to help out I’d appreciate it.
Here is what I have been able to do….Warning, it may not be the correct way so don’t rely on it 100% 😉
If you reverse the order so the #head-wrap (div around the header) is on bottom of the slider….meaning move the slider up on top, then you could add position: relative; bottom: 250px; background: none; to the #head-wrap and that would remove the background, and move the position of it so it shows up above and on top of the slider. Weird, I know…but it sort of works as you can see here – http://i.imgur.com/MWe4M82.png
I’d at least start with something like that and just play around with it to see if you can get it working.
If anyone else has a better way let me know.