css - 背景覆盖跨浏览器的最佳方式

Question

我有一张 1024*768px 的图片，想用作网页的背景。

我还希望这个背景覆盖整个窗口的背景，即使它被调整大小。而且....我不想让图像尽可能地伸展！

我已经尝试了这里的示例，除了 jquery 一个 - 因为如果只在 css 中完成，我会更喜欢它。

谢谢你！

编辑：这是链接：http ://css-tricks.com/perfect-full-page-background-image/

Answer 1

你可以试试 backstretch 插件

这是一个单行的 javascript 解决方案，只需将它（也是 jquery）包含在您的标题中并将其作为示例调用：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="jquery.backstretch.min.js"></script>
<script>
    // To attach Backstrech as the body's background
    $.backstretch("path/to/image.jpg");
</script>

官方页面： http ://srobbin.com/jquery-plugins/backstretch/

Github 源码： https ://github.com/srobbin/jquery-backstretch

Answer 2

我认为一些好的旧 CSS 可以在这样的事情上派上用场。这适用于桌面浏览器和我的 iPhone/iPad：

html {
  background: url(YOUR-IMAGE-URL) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  min-height: 100%;
  overflow: hidden;
}

body {
  background: url(YOUR-IMAGE-URL) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  min-height: 100%;
  overflow: auto;
}