why wont this background image wont display html and css-CodePudding

I just started learning html and css and I cant figure out why the backround image wont show up when I run the file all I see is "first website" in the corner

* {
  margin: 0;
  padding: 0;
}

.header {
  min-height: 100vh;
  width: 100%;
  background-image: linear-gradient(rgba(4, 9, 30, 0.7), rgba(4, 9, 30, 0.7), url(images/dhmkbannan.png));
  background-position: center;
  background-size: cover;
  position: relative;
}

<section >

</section>

CodePudding user response：

Please use like this

background-image: url("images/dhmkbannan.png"), linear-gradient(#eb01a5, #d13531); /* W3C */

You close the parentheses in the wrong place Also, you should know about background layering

Layer Stack

It should be noted that the first defined image will be the topmost in the stack. In this case, the image is on TOP of the gradient.

For more information about background layering please check this link http://www.w3.org/TR/css3-background/#layering.

CodePudding user response：

You have close the paranthese at wrong place. background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)), url(images/dhmkbannan.png);

CodePudding user response：

Your closing parenthesis is in the wrong place. You're providing the image url to the linear-gradient property, not to the background-image property.

Instead of background-image: linear-gradient(rgba(4, 9, 30, 0.7), rgba(4, 9, 30, 0.7), url(images/dhmkbannan.png));

Try background-image: linear-gradient(rgba(4, 9, 30, 0.7), rgba(4, 9, 30, 0.7)), url(https://picsum.photos/500);

* {
  margin: 0;
  padding: 0;
}

.header {
  min-height: 100vh;
  width: 100%;
  background-image: linear-gradient(rgba(4, 9, 30, 0.7), rgba(4, 9, 30, 0.7)), url(https://picsum.photos/500);
  background-position: center;
  background-size: cover;
  position: relative;
}

<section >

</section>

CodePudding user response：

You didn't provide an image in the background-image property