我正在为我的第一个网站制作一个主页，
<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>这是实际的图像背景以及它在我的网站上的样子对于主页，图像从底部被切断。我不知道为什么。如果你在PC上运行它，它可能看起来不一样，第一个网站，没有让它响应。此外，因为这是我的第一个网站，一个建议会很好，使主页更有吸引力。
你把你的CSS放到一个<script>标签…
将<script>更改为<style> ... </style>，您将没事。也把样式放到文档的头部。
html {
background-size: 100% 100%;
}
把CSS代码放在<style> codes.. </style>而不是<script></script>
如果您想保留aspect-ratio并显示整个图像，则必须设置background-color: black;。为了防止底部被切断，最好的解决方案是background-size: contain;。我还建议将图像定位到右侧(background-position: right center;)。最后你给它属性background-attachment: fixed;。
建议:使用<!DOCTYPE html>。应该使用<form></form>而不是<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>