Cannot see the navbar on image (HTML, CSS)-CodePudding

I want to mention that I`m a beginner. ^^ I also want to mention that if I remove the div part at the beginning of the code block:

 div {
        background-image: url('./images/castle.png'); `I removed this line`
        position: absolute;
        width: 100%;
        height: 100%;

I`m able to see the navbar menu, but if I keep it, I only see the background image. I don't know what to do to be able to see the menu over the image.
Below you can see the code lines.

<!DOCTYPE html>
<html>
<head>   
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
<style>
   

    h1 {
        color: orangered;
        text-align: center;
        font-family: Arial;
    }

    img {
        background-size: cover;

    }

    body {
        margin: 0;
        padding: 0;
    }

    .bg-container {
        position: relative;
        width: 100%;
        height: 380px;  
    }
    

    .bg img {
        background-image: url('./images/castle.png');
        min-height: 380px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: absolute;
        width: 100%;
        height: 100%;
    }
   
    .container {
        position: absolute;
        margin: 20px;
        width: auto;
    }
   
    .topnav {
        overflow: hidden;
        background-color: #333;
        position: relative;
        z-index: 1;
    }
   
    .topnav a {
        float: left;
        color: crimson;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 17px;
    }

    .topnav a:hover {
        background-color: #ddd;
        color: black;
    }

    
</style>
</head>
<body>

    <div >
    <div ></div>
    </div>
        <div >
            <h1>Welcome to my page</h1>
            <div >
                <a href="#">Home</a>
                <a href="#">About</a>
                <a href="#">Contact</a>
               
            </div>
         </div>
     
        

</body>

</html>

CodePudding user response：

To set the background image you can do in different ways:

One would be to use an element of type img using the posiztion: absolute, relative to the body or however to the element you want.
The second way is to set it as background-image directly from the CSS properties.

To make the navbar you should learn to use flex-box, it is very useful in different situations. To remove the margins and paddings use *(CSS universal selector) and if you want also use box-sizing: border-box;

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-image: url('https://a.cdn-hotels.com/gdcs/production12/d1130/83f1c8c6-e12d-4e69-8433-c5bbc90b5ad6.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}

.navbar {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  padding: 1rem .8rem;
  background: #333;
}

.navbar h1 {
    color: orangered;
    text-align: center;
    font-family: Arial;
}

.navbar a {
    float: left;
    color: crimson;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

.navbar a:hover {
    background-color: #ddd;
    color: black;
}

<!DOCTYPE html>
<html>
  <head>   
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
  </head>
  <body>
        <nav >
            <h1>Welcome to my page</h1>
            <div >
                <a href="#">Home</a>
                <a href="#">About</a>
                <a href="#">Contact</a>
            </div>
        </nav>
  </body>
</html>