background image not showing up when calling from css-CodePudding

background-img:url(img) is not showing up. when use background-color:red it works but wont for some reason when using img.

what I've tried: tried to take it outside the img folder, change to png, tried another img.

html

 <body>
    <section id="hero">
      <div >
      <h1>testing</h1>
      </div>
    </section>

  </body>

css

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Helvetica, sans-serif;
}
body{
  font-size: 20px;
  font-family: "Montserrat, sans-serif";


}

.container{
  color: black;
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#hero{
 background-image: url(img/Computer_repair(1).jpg); 
 background-size: cover;
 background-position: top center;
 position: relative;
}

CodePudding user response：

Your code works (see fiddle) so I'm assuming you just have the image path wrong.

So when you say...

#hero{
 background-image: url(img/Computer_repair(1).jpg);
}

...that means where ever your css file is saved, there also needs to be a folder called img and inside that folder is where you need to put Computer_repair(1).jpg

CodePudding user response：

Your code looks fine. I suspect there's a problem with the image path. Try this:

background-image: url('/img/Computer_repair(1).jpg');