Background not fitting in CSS-CodePudding

I'm making a home page for my first website,

<html>
    <head>
        <title> Home Page </title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="Main.css">
    </head>
    <body id = "Welcome">
        <div id = "Form"> 
            <h1> Pokémon Paradise </h1>
            <h1> Gotta Catch 'Em All </h1>
            <h2> Create an account now </h2>
            <button> Register </button>
            <h2> Already a member? </h2>
            <button> Login </button>
        </div>
    </body>
    <style>
    html {
        background-image: url(Background.png);
        background-size: cover;
        background-repeat: no-repeat;
    }
    #Welcome {
        display: inline-block;
        margin-left: 280px;
        margin-top: 130px;
        color: white;
        font-family: "Lucida Console";
        text-align: center;
    }
    button {
        border-radius: 8px;
        border-style: solid;
        width: 80px;
        height: 30px;
    </style>
</html>

Here's the actual image Background And how it looks on my website Website For the home page, the image gets cut off from the bottom. I'm not sure why. If you run it on your PC, it might look different, first website, hasn't made it responsive. Also, since it's my first website, a suggestion would be nice, to make the home page more appealing.

CodePudding user response：

You put your CSS into a <script> tag..

change the <script> to <style> ... </style> and you will be fine. Also put the styles into the head of the document.

CodePudding user response：

html {     
  background-size: 100% 100%;
}

And put CSS codes in <style> codes.. </style> not <script></script>

CodePudding user response：

If you want to keep the aspect-ratio and show the entire image, you would have to set background-color: black;. In order to also prevent the bottom from cutting off, the best solution is background-size: contain;. I would also suggest positioning the image to the right side (background-position: right center;).Finally you give it the property background-attachment: fixed;.

Some suggestions: Use <!DOCTYPE html>. Should probaly also use <form></form> instead of <div id="Form">.

    <!DOCTYPE html>
<html>
    <head>
        <title>Home Page</title>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="Main.css" />
    </head>
    <body id="Welcome">
        <div id="Form">
            <h1>Pokémon Paradise</h1>
            <h1>Gotta Catch 'Em All</h1>
            <h2>Create an account now</h2>
            <button>Register</button>
            <h2>Already a member?</h2>
            <button>Login</button>
        </div>
    </body>
    <style>
        html {
            background-image: url(Background.png);
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-position: right center;
            background-size: contain;
            background-color: black;
        }
        #Welcome {
            display: inline-block;
            margin-left: 280px;
            margin-top: 130px;
            color: white;
            font-family: "Lucida Console";
            text-align: center;
        }
        button {
            border-radius: 8px;
            border-style: solid;
            width: 80px;
            height: 30px;
        }
    </style>
</html>