cannot get background image to appear after following html/css tutorial-CodePudding

I am copying a code from a tutorial but cannot get the background image to appear.

the css file and html file are in the same folder, the image is sun.jpg also in the same folder the css file links and will effect h3 (changing the color, but "main" wont do anything. i think it might be the URL, but when I type in sun, I get the optio on VS editor for sun.jpg which means it knows its there. the image just says (read only) in the subject bar.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Web Page Design</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="main">
  <div class="navbar">
    <div class="icon">
      <h2 class="logo">random text</h2>
      <h3>text for h2</h3>
    </div>
  </div>
 </div>
</body>
</html>

 * {
margin: 0;
padding: 0;
}
h3{ color: saddlebrown;
margin-left: 20px;}

main {
width: 100%;
background-image: linear-gradient(to 
top,),rgba(0,0,0,0.5)50%,rgba(0,0,0,0.5)50%, url(sun.jpg);
background-position: center;
background-size: cover;
height: 109vh;

CodePudding user response：

Your selector is wrong. It should be .main since main is a class.
Your background-image should just be the URL to the image. Put the gradient bit in background-color instead.

* {
  margin: 0;
  padding: 0;
}

h3 {
  color: saddlebrown;
  margin-left: 20px;
}

.main {
  width: 100%;
  background-color: linear-gradient(to top, ), rgba(0, 0, 0, 0.5)50%, rgba(0, 0, 0, 0.5)50%;
  background-image: url(https://via.placeholder.com/300x300);
  background-position: center;
  background-size: cover;
  height: 109vh;
}

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

<head>
  <title>Web Page Design</title>
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <div class="main">
    <div class="navbar">
      <div class="icon">
        <h2 class="logo">random text</h2>
        <h3>text for h2</h3>
      </div>
    </div>
  </div>
</body>

</html>

CodePudding user response：

Hello you can also check my youtube channel for more details Here is the link https://www.youtube.com/channel/UClUo9UHVrtVPTCxBj_7qvSA