適合不同屏幕的背景

我爲我的網站創建了一個使用CSS代碼的背景，它成功地工作，但問題是我一旦在不同的屏幕上運行它，無論它是大還是小，我都沒有得到類似的結果。當我在13 inch screen上運行它時，瀏覽器放大了，我得到的形式可能與18 inch不一樣，它顯然不會有完全的形式，但或多或少我需要它看起來像樣。有什麼建議麼？ thnx提前適合不同屏幕的背景

body { 
background-image: url(../images/background.jpg); 
background-repeat: no-repeat; 
    }

我現在有一個額外的問題是，背景不是全屏。它的分辨率是1920x1080，雖然我可以在整個網頁瀏覽器頁面上看到圖片，但我仍然無法看到照片的其他細節。

來源

2013-01-23 Oneill

添加你的代碼。 –

您可能必須根據可用的屏幕尺寸動態設置字體大小。你可以用javascript來做到這一點。然而這很少是一個好主意。 HTML標記是爲了描述一個頁面，它不是做絕對佈局任務的手段。網絡對此不好。 – arkascha

我想你需要

background-size: cover;

有一些瀏覽器的不一致，這可能意味着這是更好地使用jQuery插件。

查看http://srobbin.com/jquery-plugins/backstretch/它允許您使用根據屏幕大小調整大小的背景圖像。它也涉及IE。 Nuff說。

也期待在http://css-tricks.com/perfect-full-page-background-image/

我不是100％你想什麼來實現，但上面的鏈接是值得一試。

這是CSS3方式

html { 
    background: url(../images/background.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

來源

2013-01-23 13:25:33 inspite

你使用什麼瀏覽器？ – inspite

我目前使用谷歌瀏覽器。儘管我也有Firefox – Oneill

適合不同屏幕的背景

回答

相關問題