1、首先我們需要插入壹張圖片，並且圖片只出現壹次，並設計圖片出現的位置在左上角，可以按照如下代碼來完成：
<html>
<head>
<title>圖片位置設置</title>
<style type="text/css">
body{
background-image:url("2.jpg");
background-attachment:scorll;
background-repeat:no-repeat;
background-position:top left;
}
</style>
</head>
<body>
</body></html>
可以看到背景圖片出現的位置在瀏覽器的左上角，這個和默認的設置是壹樣的。
2、我們需要讓圖片出現在上方的正中間，這裏我就用代碼來說明問題，具體詳細代碼如下：
<html>
<head>
<title>圖片位置設置</title>
<style type="text/css">
body{
background-image:url("2.jpg");
background-attachment:scorll;
background-repeat:no-repeat;
background-position:top center;
}
</style>
</head>
<body>
</body></html>
從下圖的執行結果可以看到，我們的背景圖片出現在了上方的正中間這個位置上了。
3、在上方的中間和左邊都出現了，接下來設置圖片出現在上方的右邊，具體代碼如下所示：
<html>
<head>
<title>圖片位置設置</title>
<style type="text/css">
body{
background-image:url("2.jpg");
background-attachment:scorll;
background-repeat:no-repeat;
background-position:top right;
}
</style>
</head>
<body>
</body></html>
可以看到如下圖所示的執行效果圖，圖片出現的位置在上方的右邊了。
4、如果需要圖片出現的位置在正中間，我們知道設計網頁的時候背景圖片等等元素壹般都是需要放在正中間這個位置上的，這裏我就來分析下如何將背景圖片放置在正中間這個位置上，具體代碼如下：
<html>
<head>
<title>圖片位置設置</title>
<style type="text/css">
body{
background-image:url("2.jpg");
background-attachment:scorll;
background-repeat:no-repeat;
background-position:center center;
}
</style>
</head>
<body>
</body></html>
可以看到如下的執行結果，背景圖片出現在了下方的正中間這個位置上了。
5、設置圖片出現在背景圖片的下方左邊這個位置，下邊用到了bottom這個屬性值來設置的，具體代碼如下：
<html>
<head>
<title>圖片位置設置</title>
<style type="text/css">
body{
background-image:url("2.jpg");
background-attachment:scorll;
background-repeat:no-repeat;
background-position:bottom left;
}
</style>
</head>
<body>
</body></html>
可以看到如下圖所示的結果，
6、還可以設置背景圖片出現的位置在最下方，可以看到如下代碼：
<html>
<head>
<title>圖片位置設置</title>
<style type="text/css">
body{
background-image:url("2.jpg");
background-attachment:scorll;
background-repeat:no-repeat;
background-position:bottom;
}
</style>
</head>
<body>
</body></html>
通過如下圖可以看到具體的執行效果，只用壹個bottom就能設置圖片出現在最下方這個位置上了。
7、用background-position設置圖片的位置除了使用相對位置還能使用絕對位置來設置，可以設置像素值來確定背景圖片左上角的坐標點來確定，具體代碼如下：
<html>
<head>
<title>圖片位置設置</title>
<style type="text/css">
body{
background-image:url("2.jpg");
background-attachment:scorll;
background-repeat:no-repeat;
background-position:150px 150px;
}
</style>
</head>
<body>
</body></html>
從下圖可以看到我們的執行結果，背景圖片出現的位置是150px,150px這個點作為左上角的起始點。