根据你的图片里面的代码我重新写了一遍并做了一些修改，代码如下：
<style type="text/css">body{ margin:0 padding:0 background:url(images/E4%B8%9C%E9%98%B2%E.png) no-repeat font:12px/40px "Stout Deco" color:#fff}
#zongti{ width:1400px}
#boo{ float:left margin:0 padding:0 list-style-type:none}
#boo li{ float:left}
#boo li.booimg{ margin:10px 10px 0px 10px}
.aoo{ float:right margin:0 padding:0 list-style-type:none}
.aoo li{ float:right margin-right:15px}
#boo a,.aoo a{ text-decoration:none color:#fff}
</style>
</head>
<body>
<div id="zongti">
<ul id="bobo">
<li><a href="#"><img src="images/头像.png" width="36" height="36" /></a></li>
<li><a href="#">Username</a></li>
</ul>
<ul class="aoo">
<li><a href="#"><img src="images/其他.png" width="36" height="36" /></a></li>
<li><a href="#">Conloct</a></li>
<li><a href="#">Journal</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Work</a></li>
</ul>
</div>
</body>
先指出你一个很明显的错误，就是id重复调用了，如果你不了解id是怎么回事那就老老实实用class好了；我这里也大概写了一个参照例子，你自己注意一下，其他问题就不多说了，都是些小问题，以后学习过程中一般都能改过来，至于控制左上角图片位置也不是很难，最简单的就是调整#boo li.booimg{ margin:10px 10px 0px 10px} 这段样式的值就好了
其实，如果你刚学不久的话对样式使用不熟悉，那就干脆用绝对定位 position:absolute把位置定死好了，而且绝对定位你想怎么调整位置就怎么调整，出错率并不大，只不过对页面调整性差了点而已，但是这对于新手而言问题不大
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这个点作为左上角的起始点。
