多个背景图像

Question

首先，警告，我已经从html / css的多年休息回来了，几乎忘记了一切，所以我再次处于新手级别。

我一直在尝试添加背景图片 - 一个在左上角，另一个在右下角。我现在可以看到：http://test.nihongohub.com/Mainsite/firstsite.php如你改变浏览器的宽度，包含img的div将会击中我的主要部分并毁掉它。

我已经尝试了一些关于堆栈溢出的建议，但没有一个能够正常工作。有没有人有任何建议如何解决这个问题。一位朋友建议我将img添加到页脚并将其挤出来，但我不喜欢这个想法。

我希望此图片执行的2件事，使用浏览器窗口移动，并能够在我的主页后面。

感谢您提供的任何帮助

Answer 1

您可以尝试使用固定定位并使用z-index将其移动到后面，即。

#bottom_leaf_holder {
  position: fixed;
  bottom: 50px;
  right: 0;
  z-index: -1;
}

编辑：我fixed，改变了答案。

Answer 2

您可以将所有内容放入div中，并为该div添加css规则。像

这样的东西

#main_holder {
    background: transparent url('img.jpg') no-repeat bottom right;
}

Answer 3

对此最好的解决方案是在仅包含背景图像的body标签内部设置一个包装器div。这将与body标签类似，允许您放置一个不会干扰布局的图像，如果视口很小，它将在您的内容下面。