H1 tag doesn't show up

Question

I have div inside header. In that div, I have h1 tag with some text. The div has background image applied. H1 tag does not show up on top of that div. I have tried z inxed. Doen not work...Here's code snippet:

<div class="introduction">
<h1>Some text</h1>
</div>

______________________

.introduction {
background: url(../images/bg-5.jpg) no-repeat fixed;
background-size: cover;
height: 500px;
width: 100%;
}

.introduction h1 {
color: white;
}

Answer 1

Removing the class bg-light appears to fix the issue.

<nav class="navbar fixed-top navbar-expand-lg navbar-light justify-content-between">

Answer 2

You're welcome 😊

Answer 3

Please share your code here

https://code.sololearn.com/#html

Answer 4

You have white on white: Change the text color to something other than white.

.introduction h1 {
color: white;
}

Answer 5

Thank you so much. Now I see that h1 was right behind the navbar. Thanks again. It helped me a lot. Fixed it.

Answer 6

Background image is not white. It is black. And i have white h1 on top of that. And when I refresh the page it shows the h1 tag for few seconds, then background image kinda overrides it :/

Answer 7

https://code.sololearn.com/W3iKE4VBRwpJ/#html