Thanks everyone for the great suggestions!
I didn't even think to do it the way BadCat suggested but in the end I think I prefer to either do it Wayanjaya suggested as I already have those components placed so I don't really need to add any other elements, or by just using the non-gradient gradient method.
I always do keep the option of doing effects like this in Photoshop but I do like having the flexibility of changing the overlays for different page breaks or just updating it as the design changes.
I didn't even think that using overlays are better for SEO, thanks Steve.
Maybe I'll add a suggestion to add a 'new solid' button on the background area as it might be a nice feature to have.
I updated http://exploration.coffeecup.com/
if you want to see the top background overlay change for the different page breaks. This page is just a test site, btw. I used Wayanjaya's method for this one and just put the overlay in the column and the background image inside the row.