css - 如何使图像与页面的左下角对齐？

Question

我试图将图像附加到页面的左下角，但与How to keep background image on bottom left even scroll 不同，我不希望图像在用户滚动时跟随用户。

我觉得这与让#wrap 填满整个窗口有关，但我似乎无法弄清楚如何。

我正在使用规范化，并将此代码附加到样式表中：

body {
    background-image:url('/img/graph-paper3.png');
    background-repeat:repeat;
}

#container {
    width:960px;
    margin:0 auto;
}
#sidebar {
    float:left;
    width:310px;
    padding:10px;

}

#main {
    float:right;
    width:610px;
    padding:0 10px 10px 10px;
    margin-top: 40px;
    background-image:url('/img/top.png');
    background-repeat:no-repeat;
    background-position:top center;
}

#paper {
    margin:40px 0 147px 0;
    padding:20px;
    background-color:#ffffff;
    min-height:400px;
}

#footer {
    clear:both;
    padding:5px 10px;

}
#footer p {
    margin:0;
}

#wrap {
    background-image:url('/img/jeremy-david.png');
    background-repeat:no-repeat;
    background-position:left bottom;
}

您可以在此处查看实际代码：http: //www.jeremydavid.com。

Answer 1

怎么样：

.bottom-image{
    position: absolute;
    bottom: 0px;
    left: 0px;
}

这会将图像绝对定位到页面。（确保它不是另一个绝对或相对或固定定位元素的子元素）。

Answer 2

采用

.bottom-image {
  max-width: //some % 
  z-index: -100;
  position: fixed;
  bottom: 0px;
  left: 0px;
}

你也可以使用

#wrap{ //your main #wrap container
  background: url('/img/jeremy-david.png') no-repeat bottom left;
}