If adjusting the background image opacity directly affects your text and logo, it usually means the opacity is applied to the whole container. A better approach is to create a separate overlay layer above the background image and control the opacity there. This keeps the text fully visible while dimming only the background.

Another simple trick is using a semi-transparent gradient overlay so the text stays readable even if the background has both dark and light areas.

Good point about using an overlay instead of applying opacity directly on the container — that’s definitely the cleanest approach. It keeps the text and logo sharp while still controlling the background visibility.

Another method I’ve used is adding a pseudo-element (::before) with a semi-transparent background. That way you don’t have to modify the main content at all, and it gives more flexibility for design tweaks.

Overall, separating layers (background, overlay, content) is the key to keeping designs clean and maintainable