背景随页面调整大小答案

【问题标题】：Background resizes with page背景随页面调整大小
【发布时间】：2020-05-05 12:42:00
【问题描述】：

（请客气，我对这一切还很陌生）。我试过使用封面、绝对、自动和其他任何东西来尝试让背景与页面一起调整大小。每当我调整页面大小时，我都会在底部留下一个白框： https://imgur.com/a/KauGhfD

让白色消失的唯一方法是再次将页面设置为全尺寸。这是我的 CSS。

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image:url("https://66.media.tumblr.com/6c5a2aeca064c07feb499ace6b3cd205/87a13546c57cc3af-65/s1280x1920/7f41aeae69f0fac081602c946f5aa9e5c5077c94.jpg"); 
  background-repeat: no-repeat;
  background-size: cover;
  background-positon: absolute;
  overflow: hidden;
  width: 100%
  top: 0;
  left: 0;
}
</style>
<title>home</title>
<link rel="stylesheet" type="text/css" href="css/">
<link rel="icon" href="https://i.pinimg.com/originals/f9/8f/c3/f98fc32fb656fe36088b94f789019adb.png">
</head>
<body>
</body>
</html>

【问题讨论】：

背景会随着屏幕大小缩放，我看不出问题
你要封面整页吗？或想要掩护模式

标签： html css image background

【解决方案1】：

尝试解决这个问题：

在宽度：100%之后添加;
此属性值绝对不正确background-positon: absolute;

检查此链接以了解正确的值

https://www.w3schools.com/cssref/pr_background-position.asp

你在positon 上还有一个错字应该是background-position:

【讨论】：

【解决方案2】：

您可以使用此代码作为页面背景的封面，但您必须保持图片的比例你的代码有两个错误 1-background-position:absolute 是错误的 2-width:100%这是不正确的，因为body有这个属性那么你必须像这样改变你的代码

<!DOCTYPE html>
<html>
<head>
<style>
html,body{
 height:100%;
}
body {
  background-image:url("https://66.media.tumblr.com/6c5a2aeca064c07feb499ace6b3cd205/87a13546c57cc3af-65/s1280x1920/7f41aeae69f0fac081602c946f5aa9e5c5077c94.jpg"); 
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-attachment: fixed;
 }
</style>
<title>home</title>
<link rel="stylesheet" type="text/css" href="css/">
<link rel="icon" href="https://i.pinimg.com/originals/f9/8f/c3/f98fc32fb656fe36088b94f789019adb.png">
</head>
<body>
</body>
</html>

【讨论】：