Question

我正在尝试将背景图片添加到我的网站，我已将其设置为全屏图像，问题是我无法向下滚动以查看页面的其余部分。为什么呢？

<head>
<title>hemsida</title>
</head>

<body>

<img src="bilder/hemsidan.png" 
style='position:fixed;top:0px;left:0px;width:100%;z-index:-1;'>

</body>
</html>

Answer 1

使用此：头部和身体之前

<style>
body  {
    background-image: url("bilder/hemsidan.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;     
}
</style>

删除你的标签img

Answer 2

您只需要这样做：

/* this will add background to your site and below content*/
body {
  background-image: url(https://lorempixel.com/800/800/);
  background-size: cover;
}
/* Then put the CSS related to your page*/
.content {
  background: rgba(255,255,255,0.8);
  margin: 30px;
  padding:30px;
}

<div class="content">
  <p> lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum v lorem ipsum lorem ipsum</p>
</div>
<div class="content">
  <p> lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum v lorem ipsum lorem ipsum</p>
</div>
<div class="content">
  <p> lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum v lorem ipsum lorem ipsum</p>
</div>
<div class="content">
  <p> lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum v lorem ipsum lorem ipsum</p>
</div>

Answer 3

为什么不使用真实的背景图片？这样做：

body {
  background: url(bilder/hemsidan.png) no-repeat 0 0;
  background-size: cover;
}

Answer 4

如果您想将图像用作背景图像，则应将其添加到body标签上。如果您希望它适合整个屏幕，您也可以将其用作封面。

body {
  background: url('bilder/hemsidan.png') 0 0 no-repeat transparent;
  // background-size: cover;
}

Answer 5

您的案例中的图片左上方是固定的，并覆盖了所有内容。

您可以将图像作为背景图像附加到html正文。以下html内容现在位于背景图像的前面。

<head>
<title>hemsida</title>
</head>

<body style='background: url("bilder/hemsidan.png") 0 0 no-repeat;'>

</body>
</html>

图像无法正常显示

5 个答案: