我是web开发的新手，正在努力实现我的第一个网站的目标，经过2个多小时的研究和测试，我发现了不同的CSS属性，但我仍然没有取得任何进展。
我想要的可能真的很简单。我想使用图像作为背景图像，并需要根据需要水平和/或垂直拉伸，以适应用户的视口，然后无论内容如何都保持原样，如下所示：https://css-tricks.com/examples/FullPageBackgroundImage/progressive.php
图像如下：
背景
我在很多网站上发现，我应该只使用"背景尺寸：封面；"所有物但在我的情况下，我得到了这个：
封面
这不是我想要的，因为我们再也看不到背景的顶部或底部了。
我得到的最接近的是使用背景大小：包含属性，但这样做会使图片垂直但不水平，如图所示：包含
现在我需要的是它水平伸展，但我没有得到它。
我的图片的原始大小相当大，但由于我使用封面属性时太大，我调整了1920 x 1080的大小，我发现这似乎是背景图像的推荐比例。
有没有办法实现我想要的？
到目前为止，我拥有的代码是最简单的：
html {
width: 100%;
height: 100%;
background-image: url(https://i.stack.imgur.com/3Xdg1.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
<title>Test</title>
</head>
<body>
</body>
</html>我曾尝试重置默认样式，以防我使用：cover时出现过尺寸过大的情况，但没有帮助。
感谢您的帮助
要使图像完全适合背景，可以使用以下属性。
background-size: 100% 100%;
这将把宽度和高度都设置为100%。
要拉伸图像以填充整个区域，请添加以下属性
width: 100%;
background-image: url('bdg.jpg');
background-size: 100% 100%;
尝试使用"contain"属性来查看它是否达到了您的需要。
html{
width:100%;
height:100%;
background-image: url(bgd.jpg);
background-position: center;
background-repeat: no-repeat;
background-size:contain;
}从站点复制并粘贴HTML和CSS代码，找出哪些代码不起作用。
在这种情况下，只需添加正确的"；链接"；它应该按照你想要的方式运行。
为什么它有效？因为css嵌套和属性。但这离你现在的处境还有一步之遥。全面了解情况，搞得一团糟，这比看起来更容易。
同样，您只需右键单击浏览器并选择"即可查看任何网站的源代码；查看页面源"；或等效物。设计方面完全公开。这是最好的学习方式。
这是您试图复制的网站的页面源。图像不在背景中，但只添加了超链接：
**编辑我添加了超链接到你的图像**
https://i.stack.imgur.com/3Xdg1.jpg
<html>
<head>
<meta charset="UTF-8">
<title>Full Page Background Image | Progressive</title>
<style>
* { margin: 0; padding: 0; }
html {
background: url(https://i.stack.imgur.com/3Xdg1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#page-wrap { width: 400px; margin: 50px auto; padding: 20px; background: white; -moz-box-shadow: 0 0 20px black; -webkit-box-shadow: 0 0 20px black; box-shadow: 0 0 20px black; }
p { font: 15px/2 Georgia, Serif; margin: 0 0 30px 0; text-indent: 40px; }
</style>
</head>
<body>
<div id="page-wrap">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<style type="text/css" style="display: none !important;">
* {
margin: 0;
padding: 0;
}
body {
overflow-x: hidden;
}
#demo-top-bar {
text-align: left;
background: #222;
position: relative;
zoom: 1;
width: 100% !important;
z-index: 6000;
padding: 20px 0 20px;
}
#demo-bar-inside {
width: 960px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
#demo-bar-buttons {
padding-top: 10px;
float: right;
}
#demo-bar-buttons a {
font-size: 12px;
margin-left: 20px;
color: white;
margin: 2px 0;
text-decoration: none;
font: 14px "Lucida Grande", Sans-Serif !important;
}
#demo-bar-buttons a:hover,
#demo-bar-buttons a:focus {
text-decoration: underline;
}
#demo-bar-badge {
display: inline-block;
width: 302px;
padding: 0 !important;
margin: 0 !important;
background-color: transparent !important;
}
#demo-bar-badge a {
display: block;
width: 100%;
height: 38px;
border-radius: 0;
bottom: auto;
margin: 0;
background: url(https://i.stack.imgur.com/3Xdg1.jpg) no-repeat;
background-size: 100%;
overflow: hidden;
text-indent: -9999px;
}
#demo-bar-badge:before, #demo-bar-badge:after {
display: none !important;
}
</style>
</body>
</html>