Why is image not showing? and how to put an image on top of the background image? html, css-CodePudding

I'm struggling with understanding css/html at this point. The background-image is only showing when I put it into body in css, but I would prefer to have it in a div. Also even when it's working I can't put any other image on top of it, it is just simply not showing... I checked the path and everything and it's fine, I tried to put the img in html, tried the z-index values and still nothing. I have no clue what is going on

Any one can give me a hand with this?

My html code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
    <title>ONLINE FILM FESTIVAL</title>
</head>

<body>

    <nav>
        <div >
            <h4>Online Film Festival</h4>
        </div>
        <ul >
            <li><a href="index1.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="faq.html">FAQ</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
        <div >
            <div ></div>
            <div ></div>
            <div ></div>
        </div>

    </nav>
    <div ></div>

    
    <script src="app.js"></script>

</body>

</html>

My css code

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 8vh;
  background-color: #241825;
  font-family: 'Poppins', sans-serif;
}

.logo {
  color: rgb(226, 226, 226);
  text-transform: uppercase;
  letter-spacing: 5px;
  font-size: 20px;
}

.nav-links {
  display: flex;
  width: 30%;
  justify-content: space-around;
}

.nav-links li {
  list-style: none;
}

.nav-links a {
  color: rgb(226, 226, 226);
  text-decoration: none;
  letter-spacing: 3px;
  font-weight: bold;
  font-size: 14px;
}

.burger {
  display: none;
  cursor: pointer;
}

.burger div {
  width: 25px;
  height: 3px;
  background-color: rgb(226, 226, 226);
  margin: 5px;
  transition: all 0.5s ease;

}

/* Tablet zone */
@media screen and (max-width:1024px) {
  .nav-links {
    width: 100%;
  }
}

/* Mobile phone zone */
@media screen and (max-width:768px) {
  body {
    overflow-x: hidden;
  }

  .nav-links {
    position: absolute;
    right: 0px;
    height: 92vh;
    top: 8vh;
    background-color: #241825;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 50%;
    transform: translateX(100%);
    transition: transform 0.5s ease-in;
  }

  .nav-links a {
    font-size: 20px;
    line-height: 3.5;

  }

  .nav-links li {
    opacity: 0;
  }

  .burger {
    display: block;
  }
}

.nav-active {
  transform: translateX(0%);
}

@keyframes navLinkFade {
  from {
    opacity: 0;
    transform: translateX(50px);
  }

  to {
    opacity: 1;
    transform: translateX(0px);
  }
}

.toggle .line1 {
  transform: rotate(-45deg) translate(-5px, 6px);
}

.toggle .line2 {
  opacity: 0;
}

.toggle .line3 {
  transform: rotate(45deg) translate(-5px, -6px);
}

.background-image {
  background-image: linear-gradient(to bottom,
      rgba(0, 0, 0, 0) 0%,
      rgba(17, 17, 17, 0.6) 100%),
    url(images/picc1.jpg);
  background-size: cover;
  color: #fff;
  background-repeat: no-repeat;
  z-index: 0;
  height: 100%;
  width: 100%;
 

}

/* .main__img--container {
  text-align: center;
  height: 100%;
  width: 100%;
}

#main__img {
  height: 100%;
  width: 100%;
} */

/* 
body {
  background-image: linear-gradient(to bottom,
      rgba(0, 0, 0, 0) 0%,
      rgba(17, 17, 17, 0.6) 100%),
    url(images/picc1.jpg);
  background-size: cover;
  color: #fff;
  background-repeat: no-repeat;
  z-index: 0;


}

.img1 {
  background-image: url(/images/pic1.png);
  z-index: 999;
  width: 300px;
  height: 500px;
  
} */

The last few lines starting from .main__img--container are commented, it is just simply what I've tried and didn't work, except from "body {}"... :(

CodePudding user response：

a) There is no <img> tag in your code (?).

b) Your background-image element has no content, so its height will be zero by default, i.e. the background image will also have height zero and will therefore remain invisible. To make it visible, you need to set a height for that element. BTW, percentage heights are only relevant if the parent element's height is defined or if here is content that "creates" height.

CodePudding user response：

Your .background-image class is specifying 100% height of what? Try adding height 100vh on your body element if you want to fill up the screen.

Alternatively just add a min-height on the element e.g 400px.

Works for me

edit:

<div >
  <div >
      <img src="https://images.pexels.com/photos/9869132/pexels-photo-9869132.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
  </div>
</div>