Question

我试图在我的网页第1部分放置一个背景图片，该部分超过了与此example类似的网页的一半。当我尝试这样做时，图像没有正确的比例，看起来非常紧张。

以下是我尝试这样做的CSS。

<body background=".png">

而不是身体，我认为我必须放置第1部分因为，我希望背景图像在我的第1部分内。但是当我说这没有任何反应。我想我写错了类名。

HTML

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

Answer 1

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

Answer 2

我忘记了代码，但你可能会检查这个website中的代码并找出答案。：（

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

Answer 3

我猜你应该使用

background-size：contains;

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

唯一不利的是，你丢失了完整的图像，因为它们覆盖了所有可用的空间。

Answer 4

在正文的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>个标记。我必须删除它们才能使更改正常工作。