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

发布于 2024-12-01 17:05:00 字数 680 浏览 0 评论 0原文

我有一个 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 添加以下代码时，一切都会变得混乱。你能帮助我使页面保持固定，而不需要背景颜色位于顶部图像？

谢谢

原文

I have a Joomla site that i have created a custom theme. The site is http://esn.teipir.gr/.

I have two images right and left that i want them to have background image fixed.

I use the following CSS rules

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

and

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

If i remove the background-attachment all is OK with the images but when i add with firebug the following code everything messes up.Can you help me making the pages stay fixed without the background color being on top of the image?

Thanks

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梦里°也失望 2024-12-08 17:05:00

当您设置background-attachment:fixed时，它会修复与窗口相关的背景。因此，您需要调整图像的背景位置，以便它们出现在正确的位置。如果您将 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 会阻止背景随窗口滚动。因此，如果您的视口太小并且您必须水平或垂直滚动，背景将不会移动（即它将重叠）。更多信息可以在此处找到。

When you set background-attachment:fixed it fixes the background in relation to the window. So you would then need to adjust the background-position of your images so they appear in the right place. If you replace your backgroundproperties with the css below it will line up properly.

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

Live example: http://jsfiddle.net/tw16/6fZ96/embedded/result/

To clarify background-attachment:fixed stops the background from scrolling with the window. So if your viewport is too small and you have to scroll horizontally or vertically the background will not move (i.e. it will be overlapped). More information can be found here.

回复收藏 0 原文

~没有更多了~