CSS background image not showing when declaring doctype-CodePudding

When I declare the doctype in vscode for this website the background image does not show as the height is set to 0, the background image only shows in quirks mode.

The image is still accessible via the link in inspect element.

I have tried revising the code, using a different image, rearranging its position and altering the values in the stylesheet.

Any reason as to why this is happening?

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Hot Beans Web - Home</title>
        <link rel="stylesheet" href="stylesimages/home.css">
    </head>
    <body>
        <div >
            <img src="stylesimages/logo.png" width="400px" height="100px">
        </div>
        <div ></div>
        <div >
            <h1 style="font-size:90px">We code the future.</h1>
            <p>Providing rich, advanced and sophisticated IT solutions that will make your website shine.</p>
          </div>
        <p>asjjssj</p>
        <h1><a href="https://www.youtube.com/" target="_blank">Hot Beans Web</a></h1>
        <button>shshs</button>
        <a href="https://www.youtube.com/" target="_blank">Link to Youtube</a>
    </body>
</html>

CSS

.bgimage {
    background-image:url("homebackground.jpeg");
    height: 100%; 
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.header {
    padding: 0px;
    text-align: left;
    background: #ac1b1b;
    color: rgb(0, 0, 0);
    font-size: 20px;
    text-indent: 20px;
}

body{
    font-family: 'Roboto', sans-serif;
}

.bg-text {
    color: white;
    font-weight: bold;
    border: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 80%;
    padding: 20px;
    text-align: left;
}

file paths

CodePudding user response：

I did not actually test your code. Since the div with the image background is immediately closed, i.e. does not have any child (<div ></div>) and its height is set to 100% in css, it will get a height of 0px. First, try changing that height value to 100vh (viewport height) to see if it works. Then, if you want that image to be the background of the whole page, try moving bgimage class from that div to body element.