The GUI properties for background-image/gradient don’t currently support having the background-image underneath the gradient. So you would need to add the following via the custom code tab:
Replacing the second line with your opaque gradient.
And the 3rd line with the URL to your background image.
You may wish the create the gradient in Microthemer and then copy the code from the Generated CSS option under the View menu. Tip: you can use the Ctrl+F keyboard shortcut to find the gradient in the generated CSS.
The background-image and gradient fields will be updated in the near future as part of the style options overhaul. But I hope this helps for now!
I was bitten by this today as well. It is pretty common to overly a gradient on a background. Would be a nice feature to have.
EDIT: Actually the workaround isn’t working for me. If I add the custom code it gets changed back to being placed after the image as soon as I navigate away.
EDIT2: I see eventually this was fixed. However, there is still an issue. The CSS generated places the gradient after the URL. In chrome, it results in the gradient being under the image.
Ah yes, I see what you mean. I think for now the only workaround I can suggest is to use the full code editor for this particular selector (View > Full code > CSS).
In order to support any configuration of background images and gradients, I need to merge the gradient fields with the background fields and allow for multiple rows. This will take a bit of time, so can’t be implemented as a quick fix for your issue unfortunately. I’m behind schedule, but it’s still a very high priority.
No, the background options haven’t been updated in version 7. This is high up on the todo list though. For now, you could create a color overlay effect by positing elements to overlap each using grid. The image behind, and a div with a semi-transparent background color over the top.
.
