如何插入背景图片覆盖大部分网页？

Question

我试图将背景图片放置在我的网页第1部分上，该背景占该示例页面的一半以上。 当我尝试执行此操作时，图像比例不正确，并且看起来很拉伸。

下面是我尝试执行此操作的CSS。

<body background=".png">

我认为我必须放置第1部分而不是正文，因为我希望背景图像位于第1部分之内。但是，当我放置此内容时，什么也没有发生。 我想我写错了类名。

的HTML

<a href="#">Test!</a>

Answer 1

在具有背景图片的标签中，添加background-size: cover

Answer 2

我有点忘记了代码，但是您可能可以从该网站检查代码，然后自己找出答案。 :(

如果此答案无济于事，我们深感抱歉。

Answer 3

我想你应该使用

背景大小：包含；

这将覆盖背景的所有可用区域。

唯一的缺点是，由于我们覆盖了所有可用空间，因此您失去了完整图像。

Answer 4

在主体的CSS文件中添加背景图像。

body {
  margin: 0;
  padding: 0;
  background-image: "yourimage.png";
  background-attachment: fixed;
  }

在CSS文件中将z-index删除为.navbar.navbar-default。

.navbar.navbar-default {
    background-color: #4D5061;
    height: 10vh;
    z-index: 100; //REMOVE. NOT NEEDED.
}

将导航栏设为顶部静态。

<nav class="navbar navbar-default navbar-fixed-top">

同样，在My CodePen的代码中，CSS文件中还有<style> </style>标记。 我必须删除它们才能使更改正常工作。