I'm working on a web app and this question came to my mind. I tried to look around but found a lot of resources from both approaches. So here I am, trying to figure out a good solution.
The web app is about a food business, right at the beginning it has a big header with a background image, it also has a menu without background (the background color is added after some scroll) and also a text with the business logo. See image below for reference:
Note: The logo used isn't the real logo, is just to demonstrade due to brand protection.
As you can see, the first image uses an black overlay to separate the image from the text/logo and make it readable.
Also, the second image has a shadow around these elements with a gradiente fade from the top to make the menu items readable.
I do have control over what image is going to be used in the background, but due to a limited budget, we don't have resources to make our own and best images to fit this header, so currently we are using generic images from the internet.
Using overlay: When using the overlay color, it highlights the text and logo better, but it also leave the image a little off, which is something to call users attention and to arouse desire to consume the product.
Using shadow: This can leave the background image almost untouchable, but doesn't seems to have a fluid and harmonious layout.
What do you guys think is the best consideration for this scenario?