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

我有一个1024 * 768像素的图像，我想用它作为网页的背景。背景覆盖跨浏览器的最佳方式

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

我试过这里的例子，除了jquery之外 - 因为如果只在css中完成，我更喜欢它。

谢谢！

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

来源

2011-05-05 jack

我不知道你问什么 - 那篇文章已经涵盖了每一种方法的优点和缺点它谈论。 – thirtydot 2011-05-05 09:32:00

是啊，你在文章上是什么 – sandeep 2011-05-05 09:41:11

我只是在徘徊，如果有任何其他的解决方案，因为这些都不符合我的目的100％。无论如何，我最终可能会坚持其中的一个。 – jack 2011-05-05 09:50:26

你可以尝试直道插件

这是一个一行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

来源

2012-05-01 05:47:38

While这个链接可能回答这个问题，最好在这里包含答案的重要部分，并提供参考链接。如果链接页面更改，则仅链接答案可能会失效。 – Andy 2012-11-14 10:13:42

更新，感谢信息安迪。 – 2012-11-14 15:57:45

我认为一些很好的旧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; 
}

来源

2014-05-02 18:50:07 ColossalChris

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

回答

相关问题