背景覆蓋跨瀏覽器的最佳方式

我有一個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

背景覆蓋跨瀏覽器的最佳方式

回答

相關問題