加載網頁上大的圖像作爲背景

我有圖像（尺寸 - 1600×585，文件大小 - 292 KB，MIME類型 - 圖像/ JPEG）與自然大小1600×585像素和頁面上的花費尺寸1903 x 580像素。加載網頁上大的圖像作爲背景

問題：在頁面加載顯示此圖像作爲小（不作爲天然大小）和頁上然後stretche出。連接速度不快時，看起來不太好。

我該如何解決這個問題？

img {height: 580px;position: absolute;width: 100%;z-index: 0;border: 0;vertical-align: top;}

來源

2014-02-14 user3296938

你有沒有嘗試把圖像放在身體，在CSS？ – wribit

@wribit em ...也許有一個問題...我在標記添加圖像..我會盡量做到背景圖像。謝謝 – user3296938

同時添加'position：fixed'.. –

正確的解決方案是：

img{height: 580px; position: fixed; width: 100%;z-index:0;top: 0;left: 0;}

我嘗試了所有其他答案，但每個答案都有一些「缺陷」（圖像隨着寬度開始加載，然後拉伸）。感謝@Dylan de St Pern的建議，這有助於position:fixed。

來源

2014-02-17 11:37:22 user3296938

更新答案：

.yourDiv { 
    background-image: url('../path/to/your/image'); 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: fixed or scroll; 
    background-attachment:fixed; 
}

來源

2014-02-14 10:22:33

添加了css風格。 – user3296938

如果這個答案對你有幫助，請勾選箭頭。這些人正在給你答案，並得到任何回報。 –

CSS：

body{ 
     background: url(../images/page_background.jpg) 0 0 repeat; 
    }

來源

2014-02-14 10:22:51 wribit

CSS：

body{background-image:url('root/myimage.jpg'); background-repeat:no-repeat; margin:0;}

ALSO：

設置背景顏色，如果圖像需要一段時間將負載：

body{background-color:#333;}

來源

2014-02-14 10:24:54

使用此功能與它同時在CSS調用圖像作爲背景

background: url("ur image") no-repeat cover ;

有不同的功能替我在我的情況下正常工作......

來源

2014-02-14 10:25:19 raj

加載網頁上大的圖像作爲背景

回答

相關問題