How to make background image transparent without affecting text and its alignment

Question

https://code.sololearn.com/W7GeEtHkcrS6/?ref=app

Answer 1

Here is code where I changed some class names so text will be visible, when you work with bootstrap follow documentation, some classes are connected, and structure need to be same(parent-child)
https://getbootstrap.com/docs/5.2/components/navbar/

Your class "navbar-dark" don't do anything, but bg-dark will switch theme of nav to dark, I set this to bg-danger,and changed color of brand with class "text-light", I also removed style for .nav-brand what should set color to white, because bootstrap is doing this

I didn't tested code on pc, check comments for more info

https://code.sololearn.com/WzwKa5p98ap5/?ref=app

Answer 2

Here is some solution for background, it use rgba as color, and don't use opacity, a-alpha in rgba will do this.
https://www.geeksforgeeks.org/set-the-opacity-only-to-background-color-not-on-the-text-in-css/amp/

I tried to make nav works, without reading your answer, so it don't do what you expect, check documentation or/and similar code and you will solve it, make sure you follow bootstrap structure, and use correct class names.

Answer 3

I figured it out. We need to put the background image into a child element of the parent. So that the background image and the text content will be on a seperate “layer” in the parent. We can do this with the Pseudo-element: before

Now you can change the opacity with out affecting the text.

https://code.sololearn.com/W5YGWw3NSPB3/?ref=app

Answer 4

What exactly background image, and what text?

Only problem I can see is that nav change background color to "bg-danger" when you scroll, what match "text-danger" of nav-brand, so this text can't be seen because colors are same.

Answer 5

I'm using 1 background image for the whole page. I used 0.9 opacity but it also affected the text thats why it became blurred.

I'm experimenting about the nav brand to make it white when scrolled and as you can see still no results. 😅😅