CSS背景图像与左下角对齐，不强制滚动条

Question

我有一个简单的网站:固定宽度，可变高度，居中。我希望背景图像与内容的左下角对齐，如下所示：

----------------------------------------------------------
                ____________________________
                |       <- 960px ->        |
                |                          |
                |                          |
                |                          |
                |         Content          |
                |                          |
                |                          |
                |                          |
      ----------|                          |
      |         ____________________________
      | bg-img   |
      |          |
      ------------
----------------------------------------------------------

如果浏览器窗口足够大，整个背景图像应该是可见的。如果它较小，图像应该在不强制水平或垂直滚动条的情况下被剪切。我不知道如何正确地处理水平和垂直的事情。有什么建议吗？非常感谢。

Answer 1

谢谢你的回答。我认为这不是完全可能的。我做了一种不同的方法，将元素定位在绝对的左下角。它现在位于左下角，当浏览器窗口变小时，它会被content-div所覆盖。

Answer 2

不要把背景放在content div上，把它放在content div的子目录上。然后确定该元素的绝对位置：

position: absolute;
left: -100px;
bottom: -100px;

它还需要一个宽度和一个高度，并且内容div需要是position:相对或绝对。如果你需要一个更彻底的例子，尽管说，我会写出来的。

至于在底部剪切图像，你可能就不走运了，除非你能保证你的内容高度会小于窗口的高度(你可能做不到)。

Answer 3

使图像非常大，并将其应用在body标签上，以便图像位于您想要的位置。把它放在左边居中，但要使它足够宽，以便正确定位，例如超过960px，但甚至两边，使它正确居中。