If we have a background photo, is there a way to overlay a solid color on top of that image. For example, put a 50% opacity black on top of a photograph.

I see as a work around we can add a gradient using the same color/opacity as the start and end but wasn't sure if there was a simple way to add a single solid color overlay?

Maybe a different approach but perhaps this will work:
* Add the color as an "underlay" - so add the full color you want as the background color of the photo's holding div.
* The change the opacity of the photo to suit. (Select photo, then Design tab, then Effects > Opacity )

Hmm - might want to try this file instead.

set the row as holding the background image
set the column to same height as row, then add background colour, you can adjust the opacity in the colour pallette or under effects in the design panel.

If your row needs to be full width and you dont want the image so big ,do same but use sub-grid row/column set to the width that you require, but then again BadCat's suggestion also works

Or just do it in Photoshop and have less code in your files.

This does work Ernie but you do lose out on SEO when you do this.

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.

Cheers!

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 background color will always be below any images you are using and so you cannot overlay that color ontop of the image. Using color overlays is very common these days.

So whay you are saying is introduce a new "Colour Overlay Button", not a "New Solid Colour" that's where I was confused if that's the jist of your suggestion then that's one i am all for also