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这个点作为左上角的起始点。
不知道家有没有遇到过这样的情况：在CSS控制图片大小时，如果把图片的宽度写死，比如 img{width:500px} ，固然，如果图片宽度大于500px可以很好的控制它不让它过大，但如果图片宽度小于500px，比如说只有100px时，刚才的写法会把这张图扩大5倍显示，显然，这不是我们想看到的。 那么，CSS如何可以区分对待这些图片设置大小呢？很简单，请看： 复制代码 代码如下:img{width:expression(this.width>500?"500px":this.width+"px")} 只要在CSS运用这段代码，就可以分别控制大图片与小图片。它的意思就是，如果图片宽度大于500px，那么图片就以500px的大小显示，如果小于的话，那么图片就按照原有尺寸显示！怎么样，是不是确实很简单？ 弊端：增加客户端的负荷，一般用js实现的比较多。1、css控制图片大小，参考如下代码：div img {
max-width:600px
width:600px
width:expression(document.body.clientWidth>600?"600px":"auto")
overflow:hidden
}
2、代码说明：
◎ max-width:600px在IE7、FF等其他非IE浏览器下最大宽度为600px。但在IE6中无效。
◎ width:600px在所有浏览器中图片的大小为600px
◎ 当图片大小大于600px，自动缩小为600px。在IE6中有效。
◎ overflow:hidden超出的部分隐藏，避免控制图片大小失败而引起的撑开变形。
