隨著設備的發展，不同分辨率的顯示器和設備也越來越多。如何讓一個DIV背景圖在不同分辨率下顯示合適的效果呢？下面有一個例子：
下面有兩個不同分辨率下的同一個界面效果截圖：
（圖1：在寬度為1280px下的截圖）
（圖2：在寬度為1024px下的截圖）
從圖1我們可以看出，整體效果是在1280px寬度下的顯示效果，粉色細線標出了1024px寬度應該顯示的效果，圖2就就這種效果。
HTML代碼：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>西部e網 - （weste.net）</title>
<style>
body{ padding:0; margin:0; }
.bimg{ background:url(banner.jpg) top center no-repeat;
width: 100%;
height: 445px;
position: relative;
}
</style>
</head>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>西部e網 - （weste.net）</title>
<style>
body{ padding:0; margin:0; }
.bimg{ background:url(banner.jpg) top center no-repeat;
width: 100%;
height: 445px;
position: relative;
}
</style>
</head>
<body>
<div class="bimg"> </div>
</body>
</html>
<div class="bimg"> </div>
</body>
</html>
代碼的重點在background的center屬性上，控制了背景圖片居中顯示的效果，所以在width:100%的情況下，不論寬度是多少，只會從中間向兩邊擴散顯示。