Animated background not working, need suggestion on how to fix it-CodePudding

Animated background not working. I have sat here for weeks trying to make this code work and it just wont. Open up the link and u realise there are alot of problems but what i just want rn is that the div containing the arabic cat extends all the way down. (use inspect since this website is blocking me from posting code)

link: delightful-cuchufli-33d7e2.netlify.app

I want the background to extend all the way down to the bottom of the page. As i said before there are alot of other issues but it just wont. Do remember that this is the only issue i want fixed.

CodePudding user response：

This CSS should do, this will make the animated background relative to the <html> parent and make the <html> element have a minimum height of 100% of the screen:

html {
    position: relative;
    min-height: 100%;
}

CodePudding user response：

The body of the page isn't covering the whole page. To make it cover the full page, you can use min-height.

body {
    min-height: 100vh;

    /* display background */
    background: url(https://picsum.photos/2560/1440);
    background-size: cover;
    background-repeat: no-repeat;
}

You can learn more about min-height at:

https://developer.mozilla.org/en-US/docs/Web/CSS/min-height

https://devdocs.io/css/min-height