Why I am getting a blank page?-CodePudding

I started following a tutorial today and I dont know why my script is not working?

*{
    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;
    background-size: cover;
    position: relative;

}

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="with=device-width, initial-scale=1.0">
    <title>University Website Design - Easy Tutorials</title>
    <link rel="stylesheet" href="style.css">
 </head>
<body>
    <section >

    </section>
        
</body>
</html>

It is supposed to show a background but my website is blank.

I was following this tutorial at 8:00 - 8:20. He is using brackets.io while I am using VSC. what am I doing wrong?

CodePudding user response：

If you look into your css background-image property then there's an image url which needs to be find the right directory. other than your code doesn't have any content. So it's not showing anything in the display. Otherwise you code is working file. see here, i just changed that image url .

*{
    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://dummyimage.com/640x360/fff/aaa);
    background-position: center;
    background-size: cover;
    position: relative;

}

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="with=device-width, initial-scale=1.0">
    <title>University Website Design - Easy Tutorials</title>
    <link rel="stylesheet" href="style.css">
 </head>
<body>
    <section >

    </section>
        
</body>
</html>

CodePudding user response：

url(Images/banner.png);

All code is right .but Check the file where you store the Images .

CodePudding user response：

You are not including your primary image folder. you just copy this tutorial. So you include your image folder as ../your-folder-name/image-name

CodePudding user response：

This is the running example of your code:

*{
    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/seed/picsum/300/300);
    background-position: center;
    background-size: cover;
    position: relative;

}

<body>
    <section ></section>
</body>

You need to learn, how to locate files, when you give links to images, font-files, or other files. If the image is in same location as your current file, you write url: someImage.png. If it is one folder above, you'll write url: ../someImage.png. Learn, locating files when you mention them, in your CSS.