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添加以下代码时，一切都会混乱。你可以帮助我让页面保持固定而不将背景颜色放在图像的顶部吗？ / p>

由于

Answer 1

当您设置background-attachment:fixed时，它会修复与窗口相关的背景。因此，您需要调整图片的background-position，使其显示在正确的位置。如果您使用下面的css替换background属性，它将正确排列。

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阻止背景滚动窗口。因此，如果您的视口太小而且您必须水平或垂直滚动，背景将不会移动（即它将重叠）。可以找到更多信息here。

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

1 个答案: