Question

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

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

我正在使用normalize，将此代码附加到样式表中：

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;
}

如何将图像保持与页面左下方对齐？

2 个答案: