Question

我有一个100％的页脚div，我想在其中应用背景。背景图片宽度为1350px，这是背景图片

https://dl.dropbox.com/u/69217301/bg.png

如您所见，图像是曲线，因此当屏幕尺寸大于1350px时，我的背景图像将重复，但如果我设置重复无，则它也不会填充100％。

所以我想知道的是，有什么方法可以将页脚背景设置为100％填充任何屏幕尺寸并且不重复？

请帮助我。任何解决方案都是可以接受的，CSS或Javascript，无所谓。谢谢。

Answer 1

你试过background-position: center吗？这将使其与中心对齐，因此如果您拉伸页面，背景图像仍将位于中间。

另外：Stretch and scale CSS background

Answer 2

您可以使用 background-size 属性。写得像这样：

#footer{
 background-size:100% auto;
 -moz-background-size:100% auto;
 -webkit-background-size:100% auto;
}

将此更多http://www.css3.info/preview/background-size/

Answer 3

拉伸背景图片以完全填充内容区域（CSS3）：

div
{
background:url(image.png);
background-size:100% 100%;
background-repeat:no-repeat;
}

Answer 4

执行此操作的最佳方法是将背景大小设置为cover：

CSS：

.cover{
    background-image: url("https://dl.dropbox.com/u/69217301/bg.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 126px;
}

这很难在 jsFiddle 中看到，因为结果窗口非常小，但是如果你将它扩展到最后，你可以缩小并获得一般性的想法。把它放在一个单独的页面上，真正看到它的实际效果。

使用Repeat None，我如何使页脚背景适合100％宽度

4 个答案: