1

所以我有一个带有覆盖整个页面的背景图像的包装器 div。这通常有效......我可以最大化浏览器并且背景完全覆盖，但是如果有滚动，图像会在滚动点停止。

此图像显示了jsFiddle example/1的滚动和间隙： 在此处输入图像描述

#wrapper
{
    background: url("../../Images/bgMain.jpg") no-repeat 50% 0 fixed;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    width: 100%;
}

和内部 div

#inner
{
    margin: 0 auto;
    height: 100%;
    width: 980px;
}

任何意见将是有益的。谢谢

4

3 回答 3

0

问题似乎是 .inner 上的固定宽度

.inner{
    //...
    width:980px;//this appears to be breaking the css3 background-size
}

一种可能的解决方案是在 .wrapper 上应用 min-width

#wrapper {
    background: url("http://placekitten.com/400/300") no-repeat 50% 0 scroll;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    width: 100%;
    min-width:980px;
}

然而，这意味着你的可爱猫在小屏幕上会很大（但由于你在 .inner 上应用了固定宽度，这可能无关紧要）

见小提琴

于 2013-04-15T21:56:43.060 回答
0

我最近做了一些可能会做你想做的事情 - 任何事情都值得一试，对吧？

    background: #000 url(**snip**) no-repeat 50% 0 fixed !important;

尝试将!important添加到 CSS 的末尾，它会“覆盖”其他类的任何其他样式，等等。你永远不知道，它可能会起作用——但它也可能会破坏其他东西。

!important 的作用可以在这里找到。

于 2013-04-16T02:42:40.060 回答
0

虽然这不是我想要采取的路线......通过将图像及其所有参数设置在body而不是 div 中，我可以获得我正在寻找的行为。

我不知道为什么会这样......不知何故，body 的处理方式与 div 不同（尽管我确实有一个重置脚本，所以我不希望是这种情况）......

于 2013-05-10T18:13:09.410 回答