CSS background image not showing when declaring doctype

Issue

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 class="header">
            <img src="stylesimages/logo.png" width="400px" height="100px">
        </div>
        <div class="bgimage"></div>
        <div class="bg-text">
            <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

Solution

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 class="bgimage"></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.

Answered By – burkay

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published