背景附件的CSS问题:已修复;

Question

我有一个Joomla网站,我已经创建了一个自定义主题.该网站是http://esn.teipir.gr/.

我左右两个图像,我希望他们修复背景图像.

我使用以下CSS规则

div.backgroundboxleft {
    background-attachment: fixed;
    background-image: url("/images/back_1.png");
    float: left;
    height: 822px;
    top: 40px;
    width: 457px;
}

和

div.backgroundboxright {
    background-attachment: fixed;
    background-image: url("/images/back_2.png");
    float: right;
    height: 822px;
    top: 40px;
    width: 457px;
}

如果我删除背景附件所有图像都可以,但是当我添加firebug时,下面的代码一切都搞砸了.你可以帮助我让页面保持固定而不将背景颜色放在图像的顶部吗？

谢谢

Answer 1

设置时,background-attachment:fixed它会修复与窗口相关的背景.因此,您需要调整background-position图像,使它们出现在正确的位置.如果您background使用下面的css 替换属性,它将正确排列.

div.backgroundboxleft {
    background-image: url("/images/back_1.png");
    background-attachment: fixed;
    background-position: 0 44px;
    background-repeat: no-repeat;
}

div.backgroundboxright {
    background-image: url("/images/back_2.png");
    background-attachment: fixed;
    background-position: 1323px 44px;
    background-repeat: no-repeat;
}

实例:http://jsfiddle.net/tw16/6fZ96/embedded/result/

澄清background-attachment:fixed停止滚动窗口的背景.因此,如果您的视口太小而且您必须水平或垂直滚动​​,背景将不会移动(即它将重叠).更多信息可以在这里找到.