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.
>Solution :
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");