Question

我在将div背后的背景居中时遇到了麻烦。我做了一个小提示，显示背景图像在浏览器窗口调整大小时如何保持居中，这很好，但是如果向下移动滚动条以查看绿色div的底部，则背景跟随滚动，所以不是长期居中，我试图避免。我希望bk-gnd图像的中心文本始终保持在视口中心，无论是调整屏幕大小还是滚动，这可能吗？

这是互动小提琴：http://jsfiddle.net/4fM2n/

CSS

html, body {
    height: 100%;
    margin: auto;
}

#bk-gnd-div {
    height: 100%;
    background-image: url('http://oi58.tinypic.com/5an82h.jpg');
    margin: auto;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #9FBBE2;
}

其他div代码在小提琴上，stackoverflow说它没有正确格式化并且不让我发布它？也许这是一个线索？

Answer 1

添加css

*{
margin: 0;
padding: 0;
 }

#bk-gnd-div {
    margin: 0 auto;
    width: 100%;
}

或图像固定中心

body {
    width: 100%;
    height: 100%;
    background-image:url('http://oi58.tinypic.com/5an82h.jpg');
    margin:0 auto;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
}

中心bk-gnd滚动补偿

1 个答案: