前端佈局入門中，基本上都逃不過平鋪背景圖片的問題，下面就介紹幾種圖片不重複鋪滿屏幕的方法。
方法一：
背景圖片寬高拉伸至與瀏覽器頁面一致
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三歲的HTML</title>
<style type="text/css">
#img {
z-index:-1; /*使背景圖片置底顯示*/
position:absolute;/*將背景圖片設置成 absolute（絕對定位），使其顯示於文檔流之下，不佔有文檔流空間*/
width:100%;
height:100%;
}
</style>
</head>
<body scroll = no> <!-- 圖片不隨滾動條滾動 -->
<img alt = "圖片無法加載" src="pic.jpg" id="img">
<p><abbr title = "World Health Organization" style = "color:white">WHO</abbr> 成立於 1948 年。</p>
</body>
</html>方法二：
背景圖片按比例縮放，平鋪瀏覽器頁面
縮放比例爲 圖片寬度：瀏覽器寬度
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三歲的HTML</title>
<style type="text/css">
body{
background-image: url(pic.jpg);
background-size:cover;
}
</style>
</head>
<body scroll = no> <!-- 圖片不隨滾動條滾動 -->
<img alt = "圖片無法加載" src="pic.jpg" id="img">
<p><abbr title = "World Health Organization" style = "color:white">WHO</abbr> 成立於 1948 年。</p>
</body>
</html>