中心bk-gnd滚动补偿

时间:2014-03-24 23:34:01

标签: css

我在将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说它没有正确格式化并且不让我发布它?也许这是一个线索?

1 个答案:

答案 0 :(得分:0)

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