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.
I am wondering why you want to see a :"New Solid Background" button, when in fact if you open the Background thingy thats already there, there are all the colours of the rainbow and more for you to choose from, all solid, (can adjust transparency from there also if you wish) all you have to do is pick one from the galaxy of colours available and BOOOM there is the new out of this world colour in your background, faster than a speeding rocket taking off for the moon.
Anyway glad that you have figured out your overlay stuff,
Take care wherever in the universe you all are have a great day
Wayan (in his own little universe in Bali)
The Help You Need: When You Need It The Most