使用“无重复”，如何使页脚背景适合100%宽度

With Repeat None, how can i make footer background to fit 100% width

本文关键字：背景 何使页 宽度 100% 无重复 使用      更新时间：2023-09-26

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

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

正如你所看到的，图像是曲线图像，所以当屏幕大小大于1350px时，我的背景图像会重复，但如果我设置"无重复"，它也不会填充100%。

所以我想知道的是，有没有什么方法可以将页脚背景设置为100%填充，无论屏幕大小如何，都不会重复？

请帮帮我。任何解决方案都是可以接受的，不管是CSS还是Javascript。非常感谢。

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

此外：拉伸和缩放CSS背景

您可以为此使用背景大小属性。这样写：

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

Rad this for morehttp://www.css3.info/preview/background-size/

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

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

最好的方法是将背景大小设置为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中很难看到，因为结果窗口太小了，但如果你尽可能多地扩展它，你可以缩小并获得大致的想法。把这个放在一个单独的页面上，可以真正看到它的作用。

相关文章：