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

【问题标题】：How can I insert background image to cover most of webpage?如何插入背景图片以覆盖大部分网页？
【发布时间】：2017-03-06 04:11:47
【问题描述】：

我正在尝试在我的网页第 1 部分放置一个背景图片，该图片占页面的一半以上，类似于 example。当我尝试这样做时，图像没有正确的比例并且看起来非常拉伸。

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

<body background=".png">

我认为我必须放置第 1 部分而不是正文，因为我希望背景图像位于第 1 部分中。但是，当我放置此内容时，没有任何反应。我想我写错了班级名称。

HTML

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

【问题讨论】：

标签： html css

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

将 z-index 移除到 CSS 文件中的 .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>tags。我必须删除它们才能使更改正常工作。

【讨论】：

【解决方案3】：

我有点忘记了代码，但您可能可以从website 检查代码并自己找出答案。 :(

如果这个答案没有帮助，我很抱歉。

【讨论】：

【解决方案4】：

我猜你应该使用

背景尺寸：包含；

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

唯一的缺点是，你会丢失你的完整图像，因为我们让它覆盖了所有可用空间。

【讨论】：