background:url(images/img.jpg) no-repeat 这样是禁止循环
background:url(images/img.jpg) repeat-x 这样是横向循环
background:url(images/img.jpg) repeat-y 这样是纵向循环
background:url(images/img.jpg) 这样是纵横都循环
要达到这种效果必须先知道这张图片是已那种形式导进去的，无外乎2种：1.img标签导入，那么img外层如果没有浮动或者去限定宽度，默认就是填充整个屏幕的宽度，那么就可以设置img{width:100%}这句样式来让其填充满屏幕，记得高度不要设置，不然会让图片变形失真；
2.通过css里面的background-images的方式以背景的形式导进去，那么在html框架里面的图片展示标签必须是撑满屏幕宽度的，然后在样式里面通过background-size:contain让其填充满屏
先是HTML代码<div class="d1">
<ul>
<li><a href="#">首 页惊喜</a></li>
<li><a href="#">所有商品</a></li>
<li><a href="#">空气净化器</a></li>
<li><a href="#">智能门锁</a></li>
<li><a href="#">净化器滤网</a></li>
<li><a href="#">锁架</a></li>
<li><a href="#">配件</a></li>
</ul>
</div>
*{
margin:0px
padding:0px
}
.d1 a{
text-decoration:none
color:whiteheight:28px
line-height:28pxfont-weight:bold
padding:0 20px
}
.d1 li{
list-style-type:nonefloat:left
background:url(../images/forumMenuBg.gif) right center no-repeat
}
.d1 ul{
width:960pxheight:28px
background:#383838
}
.d1 a:hover{
display:block
background:url(../images/forumMenuBg.jpg) 0 0 repeat-x
}
这是我以前写的导航代码，图片和颜色你自己改下，希望能够帮到你！
