Question

我有一张1024 * 768像素的图像，我想用它作为网页的背景。

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

我已经尝试了这里的例子，除了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;
}

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

2 个答案: