CSS background image问题

所以我有一个包含整个页面的背景图片的包装div。这一般工作...我可以最大化浏览器和背景完全覆盖，但如果有滚动，图像停止在滚动点。CSS background image问题

此图像显示滚动并从jsFiddle example/1间隙： enter image description here

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

任何意见将是有帮助的。感谢

来源

2013-04-15 aserwin

'停在滚动点'......意思是什么 – PlantTheIdea

它只存在于可见窗口中。它会缩放到窗口的大小，但是如果您滚动，它将不会显示。 – aserwin

我的猜测是，这将需要一些JavaScript。 – aserwin

虽然它不是我想要的路线...通过设置图像及其所有参数body而不是div，我可以得到我期待的行为。

我不知道这是为什么......究竟不知何故身体比一个div处理不同的（虽然我有一个复位脚本，所以我也不会想到是这种情况）......

来源

2013-05-10 18:13:09 aserwin

这个问题似乎是对.inner固定宽度

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

一种可能的解决方案是在申请.wrapper最小宽度

#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上应用了固定宽度，这可能并不重要）

see fiddle

来源

2013-04-15 21:56:43

您可能还需要从后台的位置元素中移除'fixed' –

不，它是一个与浏览器的大小成比例的大型图像。但它的大小只有可视窗口的大小......所以如果内容溢出并且滚动，图像不会缩放。如果你最大化浏览器，它会。 – aserwin

@aserwin更新的答案，改变大头针（我实际上看着你的jsfiddle），并有可能的解决方案，但我认为你发现css3属性 –

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

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

尝试添加！重要你的CSS的年底，“过度的游乐设施”从其他类其他造型，等。你永远不知道，它可能会起作用 - 但它也可能会破坏别的东西。

什么！重要的是可以找到here。

来源

2013-04-16 02:42:40 muffinjello

一些奇怪/故意的渲染行为不是这个问题 - OP已经使用了css3属性背景大小），当它包含一个宽度大于父母的固定宽度的孩子时，它似乎有一个错误或一些奇怪/故意的行为100％宽度 –

CSS background image问题

回答

相关问题