如何將背景圖像設置爲全屏

所以我有這樣的代碼：

body{ 
    background: url("background_image.jpg") no-repeat scroll center center/100% auto; 
}

這是我的HTML頁面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
    <link type="text/css" rel="stylesheet" href="css/style.css" /> 
</head> 
<body> 



</body> 
</html>

與此代碼

因此，背景圖像沒有填滿屏幕。

我想顯示在全寬度和高度的圖像

來源

2015-06-22 bircastri

請多關照你的語言。這很難理解。我試圖爲你解決它，請檢查我是否正確解釋你的問題。 – Dakkaron

這就是你想要的嗎？ https://jsfiddle.net/r3g3ucem/ –

是的，是這樣的。對不起，我的英語 – bircastri

嘗試使用這個CSS代碼：

body{ 
    background: url(backgroud-image.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

或

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

來源

2015-06-22 09:08:31

該代碼，在Mozilla Firefox中工作，但如果我嘗試打開我的html頁面，請在Goole Chrome，我無法看到所有圖像 – bircastri

好吧，嘗試改變身體在CSS代碼中的HTML –

試試這個CSS：

body{ 
    background: url("background_image.jpg") no-repeat scroll center top/cover auto; 
}

希望有所幫助！

來源

2015-06-22 09:24:38

不適用您的代碼 – bircastri

對不起，我的壞！ –

如何將背景圖像設置爲全屏

回答

相關問題