-3

I have an HTML file outside another folder called images which contains an image called banner.png. I'm trying to use that image on the header section but it won't show up. Below are codes for both HTML and CSS:

* {
  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/banner.png");
  background-position: center;
  min-height: 100%;
  background-size: cover;
  position: relative;
}
<section class="header">
</section>

The background image is not getting displayed, I am only seeing a white background. Any ideas how to fix this? Tried the other solutions for similar problems but still not working.

ThS
  • 4,597
  • 2
  • 15
  • 27
rb1705
  • 1
  • 1
  • This sort of thing is more often than not to do with the path to the image file. Have you had a look at this? https://stackoverflow.com/questions/21374534/css-background-image-not-loading – Adam Oct 04 '22 at 12:21
  • 1
    what is your filestructure? With `../` you would go one folder downward from the file (`file-relative-path`) and as such go below the root-folder which seems unlikely unless you have redirect (`htaccess`). – tacoshy Oct 04 '22 at 12:22
  • 1
    @others even when using a valid url the styling is not giving size to the container. I tried myself and the section gets a proper size only when using px values showing the background image inside. – Diego D Oct 04 '22 at 12:31

2 Answers2

-1

There is an extra space entered by you in between linear-[space]gradient Remove the space and it should work

background-image: linear-gradient(rgba(4, 9, 30, 0.7), rgba(4, 9, 30, 0.7)), url("../images/banner.png");
shotgun02
  • 756
  • 4
  • 14
-1

Extra space between linear-gradient. Remove it and you are good to go. Here's the code:

background-image: linear-gradient(rgba(4, 9, 30, 0.7), rgba(4, 9, 30, 0.7)), url("../images/banner.png");
Michael M.
  • 10,486
  • 9
  • 18
  • 34
Harsh Kumar
  • 1
  • 3