Help with filling the background of a page with a image with CSS

Hey guys, so I’m making another tribute page and I’ve hit a bit of a wall. I want to fill the whole background with an image with the rest of the elements/text over it but it just refuses to. It either allows a bit of the header to be in the image or it just doesn’t work. Any help is appreciated!

Thanks in advance for the help/advice!

Regards
Ma3_str0

My HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>A Simple Tribute</title>
        <link href="style.css" rel="stylesheet">
    </head>
    <body>

        <div id="backgr"></div>
        <!--top of page-->
        <header>
            <h1>Leonardo Da Vinci</h1>
        </header>

        <!--main part of the page-->
        <main>
            <div id="intro">Leonardo Da Vinci was a world-renowned Italian artist, scientist and engineer of the Renaissance.
                He's regarded as one of the greatest painters of all time and he's also well known for his ingenuity and engineering skills.

            </div>
        </main>

            <!--bottom of page-->
            <footer>
                <div>Made in 2020 by Ma3_str0</div>
            </footer>
        </div>
        
    </body>

</html>

My CSS:

@import url('https://fonts.googleapis.com/css2?family=Titillium+Web&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lexend+Tera&display=swap');

body, html {
    height: 100%;
    margin: 0;
  }

footer{
    text-align: center;
    font-size: x-large;
    margin-top: 100vh;
    font-family: 'Lexend Tera', sans-serif;
}

main{
    font-family: 'Titillium Web', sans-serif;
}

header{
    top:0;
    font-family: 'Lexend Tera', sans-serif;
}

#backgr{
    background-image: url(https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.e95VNV_T-NNiH4KdL8xDmAAAAA%26pid%3DApi&f=1);
    height: 100%;
    background-image: linear-gradient(180deg,white);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

@media only screen and (max-device-width: 480px) {
    body, html {
        height: 100%;
        margin: 0;
      }
    footer{
        text-align: center;
        font-size: xx-large;
        margin-top: 100vh;
        font-family: 'Lexend Tera', sans-serif;
    }

    main{
        margin-top: 10em;
        font-family: 'Titillium Web', sans-serif;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        word-wrap: break-word;
        margin-left: 1.5em;
        margin-right: 1.5em;
    }

    #intro{
        font-size: 2.8em;
    }

    header{
        font-family: 'Lexend Tera', sans-serif;
        text-align: center;
        font-size: 2.5em;
        top:0;
    }

    #backgr{
        height: 100%;
        background-image: url(https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.e95VNV_T-NNiH4KdL8xDmAAAAA%26pid%3DApi&f=1),linear-gradient(0deg,white);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }
}

(Note: I just put the image above the header for now until the problem is solved)

try out this code

1 Like

I kind of solved this after a while, but thanks for the help! I appreciate it!

please like my post beacause I want the badge

1 Like