You can have a background be semi-transparent. To add it to a widget, edit the page where that widget is located. Hover over the widget with your cursor and click on the edit link that pops up. On the right hand side you’ll see an “attributes” tab. Click on it and you’ll see a box for Custom CSS. That will apply to the widget element directly. You can specify a background there like this:
background-color: rgba(255, 255, 255, 0.7);
That is an RGBA color code for white that is 70% opaque. The first three numbers set the actual hue (red, green and blue) and the last one sets the opacity on a scale from 0 (transparent) to 1.0 (completely opaque). Feel free to adjust those to fit your needs.
For the header, you can add something like this to your child theme’s style.css file:
background-color: rgba(0, 0, 0, 0.4);
Which would give it a black background that is 40% opaque. If you run into questions or trouble, let me know.
The header worked but I’m afraid the opacity in the text block did not for some reason. Also the line under welcome to Royal Indian Grill doesn’t go all the way across. Not sure where that is. I want it to be flush with the text across the width.
Did you happen to clear out the background color from the color selector in that widget’s style options? The built in color selector loads after the custom CSS so it would override the custom background color you’ve added.
The line below the title is a short horizontal rule (HR tag). You could hide it with some CSS and replace it with a bottom border for the widget title if you like: